<!DOCTYPE html>
<html style="overflow: auto;" class="csstransforms no-csstransforms3d csstransitions js " lang="en-US"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Building a Native Mobile App with Phonegap and jQuery Mobile 1.4 | Gajotres.net</title>
<link href="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/style_002.css" rel="stylesheet" type="text/css">
<link rel="pingback" href="http://www.gajotres.net/xmlrpc.php">
<!--[if lt IE 9]>
<script src="http://www.gajotres.net/wp-content/themes/oldcar/js/html5shiv.js" type="text/javascript"></script>
<script type="text/javascript" src="http://www.gajotres.net/wp-content/themes/oldcar/js/respond.src.js"></script>
<link href="http://www.gajotres.net/wp-content/themes/oldcar/css/ie8.css" rel="stylesheet" type="text/css" />
<![endif]-->
<link rel="alternate" type="application/rss+xml" title="Gajotres.net » Feed" href="http://www.gajotres.net/feed/">
<link rel="alternate" type="application/rss+xml" title="Gajotres.net » Comments Feed" href="http://www.gajotres.net/comments/feed/">
<link rel="alternate" type="application/rss+xml" title="Gajotres.net » Building a Native Mobile App with Phonegap and jQuery Mobile 1.4 Comments Feed" href="http://www.gajotres.net/building-a-native-mobile-app-with-phonegap-and-jquery-mobile-1-4/feed/">
<link rel="stylesheet" id="download-button-shortcode-css-css" href="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/downloadbutton.css" type="text/css" media="all">
<link rel="stylesheet" id="cptchStylesheet-css" href="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/style.css" type="text/css" media="all">
<link rel="stylesheet" id="wp-syntax-css-css" href="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/wp-syntax.css" type="text/css" media="all">
<link rel="stylesheet" id="reset-css" href="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/reset.css" type="text/css" media="all">
<link rel="stylesheet" id="mgrid-css" href="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/mgrid.css" type="text/css" media="all">
<link rel="stylesheet" id="layout-css" href="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/layout.css" type="text/css" media="all">
<link rel="stylesheet" id="javascript-css" href="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/javascript.css" type="text/css" media="all">
<link rel="stylesheet" id="shortcode-css" href="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/shortcodes.css" type="text/css" media="all">
<link rel="stylesheet" id="custom-css" href="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/custom.css" type="text/css" media="all">
<link rel="stylesheet" id="responsive-css" href="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/responsive.css" type="text/css" media="all">
<link rel="stylesheet" id="mgrid-responsive-css" href="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/mgrid-responsive.css" type="text/css" media="all">
<link rel="stylesheet" id="Oswald-css" href="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/css_002.css" type="text/css" media="all">
<script async="" src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/cbgapi.loaded_1"></script><script async="" src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/cbgapi.loaded_0"></script><script src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/analytics.js" async="" type="text/javascript"></script><script src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/widgets.js"></script><script src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/gtm.js" async=""></script><script type="text/javascript" src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/jquery_002.js"></script>
<script type="text/javascript" src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/jquery-migrate.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
var AjaxCheckClicks = {"ajaxurl":"http:\/\/www.gajotres.net\/wp-admin\/admin-ajax.php","nonce":"1484ccc79e"};
/* ]]> */
</script>
<script type="text/javascript" src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/checkclicks.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
var AjaxUpdateClicks = {"ajaxurl":"http:\/\/www.gajotres.net\/wp-admin\/admin-ajax.php","nonce":"e72d0227fc"};
/* ]]> */
</script>
<script type="text/javascript" src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/updateclicks.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
var clientcfmonitor = {"client_ip":"10.118.12.33","clickcount":"2","bannedperiod":"1","preurl":"http:\/\/www.gajotres.net\/wp-content\/plugins\/adsense-click-fraud-monitoring\/clickupdate.php","firstclickdate":[[""],[""]],"updatedVisitCount":"0","isblockedcount":"0","customclass":"cfmonitor","firstclick":"false","disablead":"false","currentURL":"\/building-a-native-mobile-app-with-phonegap-and-jquery-mobile-1-4\/"};
/* ]]> */
</script>
<script type="text/javascript" src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/check_min.js"></script>
<script type="text/javascript" src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/hideads.js"></script>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://www.gajotres.net/xmlrpc.php?rsd">
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://www.gajotres.net/wp-includes/wlwmanifest.xml"> 
<link rel="prev" title="Top 10 best looking free jQuery Mobile themes" href="http://www.gajotres.net/top-10-best-looking-free-jquery-mobile-themes/">
<link rel="next" title="Creating Phonegap project on MacOS from Command Line" href="http://www.gajotres.net/creating-phonegap-project-on-macos/">
<meta name="generator" content="WordPress 3.8">
<link rel="shortlink" href="http://www.gajotres.net/?p=3306">
<!-- All in One Webmaster plugin by Crunchify.com --><meta name="msvalidate.01" content="09A394E7D2AB56218E0C7C0E3AC102AC">
<meta name="alexaVerifyID" content="yWZ-L7PcfnjxN34rpPwRqDwDNKc">
<!-- /All in One Webmaster plugin --><script type="text/javascript">
	window._wp_rp_static_base_url = 'http://wprp.zemanta.com/static/';
	window._wp_rp_wp_ajax_url = "http://www.gajotres.net/wp-admin/admin-ajax.php";
	window._wp_rp_plugin_version = '3.3';
	window._wp_rp_post_id = '3306';
	window._wp_rp_num_rel_posts = '6';
	window._wp_rp_blog_id = '2799707';
	window._wp_rp_thumbnails = true;
	window._wp_rp_post_title = 'Building+a+Native+Mobile+App+with+Phonegap+and+jQuery+Mobile+1.4';
	window._wp_rp_post_tags = ['jquery-mobile', 'phonegap', 'blog', 'jqueri', 'engin', 'cordova', 'chrome', 'write', 'app', 'smartphon', 'webkit', 'tablet', 'tutori', 'web', 'safari', 'mobil', 'design', 'apach'];
	window._wp_rp_remote_recommendations = false;
	window._wp_rp_promoted_content = true;
	window._wp_rp_traffic_exchange = true;
</script>
<script type="text/javascript" src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/loader.js" async=""></script>
<link rel="stylesheet" href="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/vertical.css">
<style type="text/css">
.related_post_title {
}
ul.related_post {
}
ul.related_post li {
}
ul.related_post li a {
}
ul.related_post li img {
}
.rich-content h3, .wp_rp_wrap .related_post_title  {
font-size:2em !important;
font-weight: normal !important;
}
ul.related_post {
margin-top: 20px !important;
}</style>
<link href="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/css.css" rel="stylesheet" type="text/css">
<link href="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/css.css" rel="stylesheet" type="text/css">
<link href="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/css.css" rel="stylesheet" type="text/css">
<link href="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/css.css" rel="stylesheet" type="text/css">
<style type="text/css">
h1.logo a{background:url(http://www.gajotres.net/wp-content/uploads/2013/09/logo_veliki.png) no-repeat;}
.responsive-logo {background: url(http://www.gajotres.net/wp-content/uploads/2013/09/logo1.png) no-repeat;}
@media only screen and (-Webkit-min-device-pixel-ratio: 1.5),
						only screen and (-moz-min-device-pixel-ratio: 1.5),
						only screen and (-o-min-device-pixel-ratio: 3/2),
						only screen and (min-device-pixel-ratio: 1.5) {
}
#sidebar,.button:hover,.responsive-header,.responsive-menu > ul > li > a:hover,.responsive-menu > ul > li > ul > li > a:hover,#portfolio-filter li a.current-filter,.sticky .img{background:#459E63}
a,h1 a:hover,h2 a:hover,h3 a:hover,h4 a:hover,h5 a:hover,h6 a:hover,.section-title,.blog-article-title a:hover,#main .sidebar-widgets a,.fluid-articles li .post-info .read-more a:hover{color:#459E63}
.team-member:hover img{border-color:#459E63}
.home .primary-navigation > ul > li.active > a,.primary-navigation > ul > li.current-menu-item > a,.primary-navigation > ul > li.current-menu-parent >a{border-color: #222222;color: #222222;}
.primary-navigation > ul > li > a:hover {color: #222222;}
.blog-article-header .img{background-color:#333333}
.blog-article-header .img{border-radius:50%;}
h3.logo-sub{font-family:"Open Sans",Arial;}
h3.logo-sub{font-size:1.1em;}
.primary-navigation > ul > li > a,.primary-navigation > ul > li > ul > li a{font-family:"Open Sans",Arial;}
.primary-navigation > ul > li > a{font-size:1.25em;}
.primary-navigation > ul > li > ul > li a{font-size:1em;}
.sidebar-widget h2{font-family:"Open Sans",Arial;}
.sidebar-widget h2{font-size:1.8em;}
h1,h2,h3,h4,.blog-article-title,.blog-article-title a,.contact-form h4{font-family:"Open Sans",Arial;}
.blog-article-title,.blog-article-title a{font-size:1.6em;}
.fluid-articles li .post-info h4{font-size:1.2em;}
</style>
<style type="text/css">
body {
    background: none repeat scroll 0 0 #FFFFFF !important;
}

h1, h2, h3, h4, h5, h6 {
    color: #333333 !important;
}

#sidebar {
    background: #459e63;
}


.rich-content ul li { 
    list-style-type: square !important;
}

h1.logo {
    margin-top: 17px !important;
    margin-bottom: -10px !important;
}

.logo h3 {
   font-family: "Oswald",Arial !important;
}

#menu-main-menu li a {
    color: #fff !important;
}

/*.home .primary-navigation > ul > li.active > a, .primary-navigation > ul > li.current-menu-item > a, .primary-navigation > ul > li.current-menu-parent >a {
    border-color: #FFFFFF !important;
}*/

.fsb-title {
   font-family: "Oswald",Arial !important;
    text-transform:uppercase;
    font-size: 1em !important;
}

.sidebar-widget {
    margin-bottom: 10px !important;
    padding-bottom: 20px !important;
    border-bottom: 10px solid #DDDDDD;
}

.sidebar-widget h2 {
    font-size: 1.6em !important;
    padding: 0 !important;
   font-family: "Oswald",Arial !important;
}

.sidebar-widget:last-child {
    margin-bottom: 10px !important;
}

.alignleft {
    margin-bottom: 30px;
}

#fsb-social-bar, #fsb-social-bar div {
    padding: 0 0 0 0 !important;
    float: left;
   border-width: 0 !important;
}

#fsb-social-bar {
    padding-top: 5px !important;
}

#fsb-social-bar p {
    height: 30px;
    width: 150px;
    float: left;
    line-height: 135%;
}

.su-heading-inner {
   font-family: "Open Sans",Arial !important;
}

.size-full {
    margin: 0 auto !important;
}

.su-post-excerpt p, .su-post-comments-link {
    display: none !important;
}

.su-posts-default-loop .su-post {
    margin-bottom: 0 !important;
}

.su-heading, .su-heading div {
    border-width: 0 !important;
    padding: 0.25em 0 0.1em 0 !important;
}

.taglist a {
    border-width: 0 !important;
    background: #e5e5e5 !important;
    border-radius:5px !important;
    color: #555555 !important;
}

.su-frame-inner {
    border: 0 solid #EEEEEE !important;
    padding: 0 !important;
}
.su-frame{
    border: 0 solid #999999 !important;
    box-shadow: 0 0 0 #CCCCCC !important;
}

.blog-article-content, .blog-article-content p {
   color: #333333 !important;
   font-family: "Open Sans",Arial !important;
   font-size: 1.2em !important;
   line-height: 25px !important;
}

.blog-article-content h1 {
    margin: 10px 0 0 0 !important;
    font-weight: bold !important;
}

.blog-article-content hr {
    border-bottom: 1px dotted #000000 !important;
}

.blog-article-header {
    margin: 0 0 10px !important;
}
</style>
<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery('.dwnld-button-shortcode a br').remove();
});
</script>

<!-- All in One SEO Pack 2.1.2 by Michael Torbert of Semper Fi Web Designob_start_detected [-1,-1] -->
<link rel="author" href="https://plus.google.com/112675895785265588656?rel=author">
<meta name="description" content="This is an extensive how to tutorial made to teach you how to create a PhoneGap + jQuery Mobile project.">

<meta name="keywords" content="jquery,jquery mobile,phonegap,eclipse,windows,tutorial,android,example,easy,jquery-mobile">

<link rel="canonical" href="http://www.gajotres.net/building-a-native-mobile-app-with-phonegap-and-jquery-mobile-1-4/">
<!-- /all in one seo pack -->
<link href="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/shCore.css" type="text/css" rel="stylesheet"><link href="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/shThemeDefault.css" type="text/css" rel="stylesheet"><style type="text/css" id="syntaxhighlighteranchor"></style>
<script src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/jquery-1.js"></script>
<script gapi_processed="true" type="text/javascript" src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/platform.js"></script>
<style>
#main {
    padding-top: 0px !important;
}

#main-content-header {
    width: 100%;
    height: 150px;
    background: #459E63;
    margin-bottom: 40px;
}


#main-content-toolbar {
    position: fixed;
    top:0;
    left:360px;
    width: 100%;
    height: 30px;
    background: #363636;
    z-index: 9999999;
}

#sidebar {
    padding: 0 !important;
    width: 360px !important;
    background: #FFFFFF;
}

#sidebar-toolbar {
    position: fixed;
    top:0;
    left:0;
    height: 27px !important;
    width: 345px !important;
    padding: 3px 0 0 15px;
    background: #363636;
    z-index: 9999999;
}

#sidebar-header {
    width: 345px;
    height: 130px;
    padding: 20px 0 0 15px;
    background: #459E63;
}

#sidebar-header  h3 {
    color: #ffffff !important;
}

@-moz-document url-prefix() {
    #main-content-header {
        height: 140px;
    }
    #sidebar-header {
        width: 330px;
        height: 125px;
        padding: 15px 0 0 30px;
    }
    h1.logo {
        margin-top: 0 !important;
        margin-bottom: -5px !important;
    }
}

#sidebar-content {
    width: 315px;
    margin-top: 20px;
    padding: 20px 10px 0 25px;
    border-right: 1px dotted rgba(0, 0, 0, 0.2);
    background: #FFFFFF;
}

.sidebar-widget {
float:left !important;
}

.sidebar-widget hr {
    border-bottom: 1px dotted #263034 !important;
    height: 0 !important;
    margin-bottom: 10px !important;
}

#menu-main-menu li a, .sidebar-widgets li h2, .bd h4 a {
    color: #263034 !important;
    font-family: "Open Sans",Arial !important;
}

.sidebar-widgets li h2, h3.logo-sub, #menu-main-menu li a {
    font-family: "Oswald",Arial !important;
}

.logo-sub {
    text-shadow: 1px 1px #000 !important;
}

#menu-main-menu li a {
    line-height: 20px;
}

.bd h4 a {
    font-size: 0.9em !important;
}

.bd p {
    color: #263034 !important;
    font-family: "Open Sans",Arial !important;
}

#footer {
    opacity: 1 !important;
    margin-left: 0px !important;
}

#footer p {
    color: #263034;
}

#menu-main-menu li, #sidebar-toolbar ul {
    display: inline-block;
    height: 100% !important;
}

#menu-main-menu li {
    margin-left: 10px !important;
}
 
#menu-main-menu li a {
    font-family: "Oswald",Arial;
    font-size: 1.1em;
    color: #afafaf !important;
}

.su-highlight {
   border-radius: 3px !important;
   -webkit-box-shadow: 1px 1px 0px rgba(50, 50, 50, 0.75);
   -moz-box-shadow:    1px 1px 0px rgba(50, 50, 50, 0.75);
   box-shadow:         1px 1px 0px rgba(50, 50, 50, 0.75);
}

.social-icons {
    margin-top: 4px !important;
}

#googleplus_widget{
    width: 298px;
    height: 340px;
    float:left;
}
#googleplus_widget span{
    width: 298px;
    height: 340px;
    overflow: hidden;
    background: #fff;
    float:left;
}
#googleplus_widget span div{
    margin: -1px 0 0 -1px !important;
    position: relative;
}

.blog-article-content a  {
    /*color: #000 !important;*/
}

</style>
</head>

<body style="overflow: auto;" class="single single-post postid-3306 single-format-standard su-other-shortcodes-loaded">
        <!-- ===================================================================================
		============== SIDEBAR
		===================================================================================== -->
		<aside tabindex="5000" style="min-height: 24285px; overflow-y: hidden;" id="sidebar">
                        <div id="sidebar-toolbar">
                            <ul class="social-icons clearfix">
<a href="https://plus.google.com/112675895785265588656" title="Google+" target="_blank"><i class="social-icon googleplus"></i></a> 
<a href="https://www.facebook.com/Gajotres" title="Facebook" target="_blank"><i class="social-icon facebook"></i></a> 
 <a href="https://twitter.com/gajotres" title="Twitter" target="_blank"><i class="social-icon twitter"></i></a> 
<a href="http://hr.linkedin.com/in/dragangaic" title="linkedIn" target="_blank"><i class="social-icon linkedin"></i></a>
<a href="http://www.gajotres.net/feed" title="Feed" target="_blank"><i class="social-icon rss"></i></a> 
</ul>
                            <ul id="menu-main-menu" class=""><li id="menu-item-2344" class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-parent current-post-parent menu-item-2344"><a href="http://www.gajotres.net/category/blog-2/">Blog</a></li>
<li id="menu-item-2505" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2505"><a href="http://www.gajotres.net/contact-2/">Contact Me</a></li>
</ul>                        </div>
                        <div id="sidebar-header">
			    <!-- LOGO -->
			    <h1 class="logo"><!--<a href="http://www.gajotres.net"><span class="first">GAJO</span><span class="second">TRES</span></a>--><a href="http://www.gajotres.net/" title="Gajotres.net">Gajotres.net</a></h1>
			    <h3 class="logo-sub">Frameworks, Inspiration, Technology</h3>
			    <!--  SOCILA ICONS -->
                        </div>
                        <div id="sidebar-content">
				<ul class="sidebar-widgets">
					<li class="sidebar-widget"><h2>FOLLOW ME</h2><hr>
						   <div id="googleplus_widget"><span><div id="___person_0" style="text-indent: 0px; margin: 0px; padding: 0px; background: none repeat scroll 0% 0% transparent; border-style: none; float: none; line-height: normal; font-size: 1px; vertical-align: baseline; display: inline-block; width: 300px; height: 355px;"><iframe title="+Badge" data-gapiattached="true" src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/person.htm" name="I0_1389359200170" id="I0_1389359200170" vspace="0" tabindex="0" style="position: static; top: 0px; width: 300px; margin: 0px; border-style: none; left: 0px; visibility: visible; height: 355px;" marginwidth="0" marginheight="0" hspace="0" frameborder="0" scrolling="no" width="100%"></iframe></div></span></div>
					</li>
				</ul>
			<!--  PRIMARY NAVIGATION -->
			<!--<nav class="primary-navigation">-->

			<!--</nav>-->
           
			<ul class="sidebar-widgets">
                            
<!-- Quick Adsense Wordpress Plugin: http://quicksense.net/ -->
<li class="sidebar-widget">
<script async="" src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/adsbygoogle.js"></script>
<!-- Sidebar -->
<ins data-adsbygoogle-status="done" class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2165291328933509" data-ad-slot="8989017471"><ins style="display:inline-table;border:none;height:250px;margin:0;padding:0;position:relative;visibility:visible;width:300px;background-color:transparent"><ins id="aswift_0_anchor" style="display:block;border:none;height:250px;margin:0;padding:0;position:relative;visibility:visible;width:300px;background-color:transparent"><iframe marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" onload="var i=this.id,s=window.google_iframe_oncopy,H=s&amp;&amp;s.handlers,h=H&amp;&amp;H[i],w=this.contentWindow,d;try{d=w.document}catch(e){}if(h&amp;&amp;d&amp;&amp;(!d.body||!d.body.firstChild)){if(h.call){setTimeout(h,0)}else if(h.match){try{h=s.upd(h,i)}catch(e){}w.location.replace(h)}}" id="aswift_0" name="aswift_0" style="left:0;position:absolute;top:0;" frameborder="0" height="250" scrolling="no" width="300"></iframe></ins></ins></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</li><li class="sidebar-widget"><h2>Recent Articles</h2><hr><ul class="recent-posts"><li id="list-3963"><div class="media"><div class="img"><a href="http://www.gajotres.net/how-to-prevent-jquery-mobile-page-navigation/" class="thumbnail"><img src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/prevent_transition-150x150.jpg"></a></div><div class="bd"><h4><a href="http://www.gajotres.net/how-to-prevent-jquery-mobile-page-navigation/" title="How to prevent jQuery Mobile page navigation">How to prevent jQuery Mobile page navigation</a></h4><p>Lets say we have a jQuery Mobile that requires user to autho...</p></div></div></li><li id="list-3880"><div class="media"><div class="img"><a href="http://www.gajotres.net/how-to-correctly-submit-form-data-in-jquery-mobile/" class="thumbnail"><img src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/form_handling-150x150.jpg"></a></div><div class="bd"><h4><a href="http://www.gajotres.net/how-to-correctly-submit-form-data-in-jquery-mobile/" title="How to correctly submit form data in jQuery Mobile">How to correctly submit form data in jQuery Mobile</a></h4><p>Who ever played with jQuery Mobile knows how form handling c...</p></div></div></li><li id="list-3560"><div class="media"><div class="img"><a href="http://www.gajotres.net/in-depth-review-of-phonejs-html5-javascript-framework/" class="thumbnail"><img src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/phonejs-header-150x150.jpg"></a></div><div class="bd"><h4><a href="http://www.gajotres.net/in-depth-review-of-phonejs-html5-javascript-framework/" title="In depth review of a PhoneJS HTML5 JavaScript framework">In depth review of a PhoneJS HTML5 JavaScript framework</a></h4><p>I recently discovered a framework I wanted to share with my ...</p></div></div></li><li id="list-3455"><div class="media"><div class="img"><a href="http://www.gajotres.net/creating-phonegap-project-on-macos/" class="thumbnail"><img src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/phonegap_macos-150x150.jpg"></a></div><div class="bd"><h4><a href="http://www.gajotres.net/creating-phonegap-project-on-macos/" title="Creating Phonegap project on MacOS from Command Line">Creating Phonegap project on MacOS from Command Line</a></h4><p>After a rather long hiatus and public demand here’s an...</p></div></div></li></ul></li>            			</ul><!-- END SIDEBAR WIDGETS -->
			
                            <hr>
				<footer id="footer">
					<p>© All rights reserved 2013</p>
                                        <a href="http://google.com/profiles/112675895785265588656" rel="author">By Dragan Gaić</a>
				</footer>
                        
                        </div>
		</aside>        <!-- ===================================================================================
		============== Responsive Header
		===================================================================================== -->
		<header class="responsive-header">
			<h1 class="responsive-logo"><a href="http://www.gajotres.net/">Gajotres.net</a></h1>
			<div class="responsive-menu">
                				<div style="display: none;" class="menu-trigger"><span>Menu</span></div>
                                
                <ul style="display: none;" id="menu-main-menu-1" class="hidden"><li class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-parent current-post-parent menu-item-2344"><a href="http://www.gajotres.net/category/blog-2/">Blog</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2505"><a href="http://www.gajotres.net/contact-2/">Contact Me</a></li>
</ul>			</div>
		</header>        
	    <!-- ===================================================================================
		============== MAIN
		===================================================================================== -->
		<section id="main">
		<div id="main-content-toolbar"></div>
		<div id="main-content-header"></div>
                <div id="main-overlay-3"></div>
                <div id="main-overlay-2"></div>
                <div id="main-overlay-1"></div>
                <div style="height: 834px;" id="ajax-load">
                    <a href="javascript:;" id="ajax-close"></a>
                    <div id="ajax-content"></div>
                </div>			<div class="container">
               <!-- ************************* BLOG ARTICLES ************************* -->
					<div class="single-post-page grid-12">
                                								<!-- SINGLE BLOG ARTICLE -->
								<article id="post-3306" class="post-3306 post type-post status-publish format-standard hentry category-blog-2 tag-jquery-mobile-2 tag-phonegap single-blog-article">
									<!-- BLOG ARTICLE HEADER -->
									<div class="blog-article-header media">
										<div class="img article-icon"></div>
										<div class="bd">
											<h1 class="blog-article-title title single-title"><a href="http://www.gajotres.net/building-a-native-mobile-app-with-phonegap-and-jquery-mobile-1-4/" title="Building a Native Mobile App with Phonegap and jQuery Mobile 1.4" rel="bookmark">Building a Native Mobile App with Phonegap and jQuery Mobile 1.4</a></h1>

<!-- UKLONITI KASNIJE -->
<span class="vcard author blog-article-info"><span class="fn">
<a href="http://google.com/profiles/112675895785265588656" style="display: none;" rel="author">By Dragan Gaić</a>
</span></span>	
<span class="post_date date updated blog-article-info">2 October,2013</span>
<!-- UKLONITI KASNIJE KRAJ -->

<!-- Google Tag Manager -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-WGXM67"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-WGXM67');</script>
<!-- End Google Tag Manager -->

											<!--     
   <span class="blog-article-info"><a href="http://www.gajotres.net/author/gajotres/">By Dragan Gaić</a> / in <a href="http://www.gajotres.net/category/blog-2/" title="View all posts in Blog" rel="category tag">Blog</a> / October 2, 2013</span>
-->
										</div>
									</div>
									<!-- BLOG ARTICLE CONTENT -->
									<div class="blog-article-content rich-content">
										            <div style="width: 940px;" id="fsb-social-bar" class="fsb-social-bar" data-post-id="3306" data-socialite="true"><style type="text/css">            #fsb-social-bar { width: 100%; border-bottom: 1px solid #dbdbdb; border-top: 1px solid #dbdbdb; padding: 10px 0; margin: 0px 0 20px 0; float: left; background: #fff; position: relative; clear: both; }            #fsb-social-bar a { border: 0px !important }            #fsb-social-bar.fsb-fixed { position: fixed; top: -2px; z-index: 99999; }            #fsb-social-bar .fsb-title { display: block; float: left; margin: 3px 20px 0 0; font-size: 16px; font-family: Arial, Helvetica, sans-serif; text-decoration: none; color: #333; }            #fsb-social-bar .fsb-share-facebook { width: 120px; float: left; padding: 3px 0 2px; height: 25px; }            #fsb-social-bar .fsb-share-facebook.fsb-hide-count { width: 44px; overflow: hidden; margin-right: 30px; }            #fsb-social-bar .fsb-share-twitter { float: left; width: 135px; padding: 3px 0 2px; height: 25px; }            #fsb-social-bar .fsb-share-twitter.fsb-hide-count { width: 61px; overflow: hidden; margin-right: 30px; }            #fsb-social-bar .fsb-share-google { float: left; width: 105px; padding: 3px 0 2px; height: 25px; }            #fsb-social-bar .fsb-share-google.fsb-hide-count { width: 33px; overflow: hidden; margin-right: 30px; }            #fsb-social-bar .fsb-share-linkedin { float: left; width: 135px; padding: 3px 0 2px; height: 25px; }            #fsb-social-bar .fsb-share-linkedin.fsb-hide-count { width: 61px; overflow: hidden; margin-right: 30px; }            #fsb-social-bar .fsb-share-pinterest { float: left; width: 115px; padding: 3px 0 2px; height: 25px;}            #fsb-social-bar .fsb-share-pinterest.fsb-hide-count { width: 43px; overflow: hidden; margin-right: 30px; }            #fsb-social-bar .socialite { display: block; position: relative; background: url(http://www.gajotres.net/wp-content/plugins/floating-social-bar/images/fsb-sprite.png) no-repeat scroll 0 0; }            #fsb-social-bar .socialite-loaded { background: none !important; }            #fsb-social-bar .fsb-service-title { display: none; }            #fsb-social-bar a { color: #333; text-decoration: none; font-size: 12px; font-family: Arial, Helvetica, sans-serif; }            #fsb-social-bar .fsb-twitter { width: 105px; height: 25px; background-position: -13px -10px; line-height: 25px; vertical-align: middle; }            #fsb-social-bar .fsb-twitter .fsb-count { width: 30px; text-align: center; display: inline-block; margin: 0px 0 0 69px; color: #333; }            #fsb-social-bar .fsb-google { width: 75px; height: 25px; background-position: -136px -10px; line-height: 25px; vertical-align: middle; }            #fsb-social-bar .fsb-google .fsb-count { width: 30px; text-align: center; display: inline-block; margin: 0px 0 0 41px; color: #333; }            #fsb-social-bar .fsb-google .socialite-button { margin: 0 !important; }            #fsb-social-bar .fsb-share-google .socialite-loaded .socialite-button{padding: 2px 0 0}            #fsb-social-bar .fsb-facebook { width: 89px; height: 25px; background-position: -231px -10px; line-height: 25px; vertical-align: middle; }            #fsb-social-bar .fsb-facebook .fsb-count { width: 30px; text-align: center; display: inline-block; margin: 0px 0 0 52px; color: #333; }            #fsb-social-bar .fsb-facebook .socialite-button { margin: 0 !important;}            #fsb-social-bar .fsb-share-facebook .socialite-loaded .socialite-button {padding: 2px 0 0}            #fsb-social-bar .fsb-linkedin { width: 105px; height: 25px; background-position: -347px -10px; line-height: 25px; vertical-align: middle; }            #fsb-social-bar .fsb-linkedin .fsb-count { width: 30px; text-align: center; display: inline-block; margin: 0px 0 0 70px; color: #333; }            #fsb-social-bar .fsb-linkedin .socialite-button { margin: 0 !important; }            #fsb-social-bar .fsb-pinterest { width: 88px; height: 25px; background-position: -484px -10px; line-height: 25px; vertical-align: middle; }            #fsb-social-bar .fsb-pinterest .fsb-count { width: 30px; text-align: center; display: inline-block; margin: 0px 0 0 50px; color: #333; }            #fsb-social-bar .fsb-pinterest .socialite-button { margin: 0 !important; }            .fsb-clear { clear: both; }            .fsb-clear:after { clear:both; content:; display:block; height:0; line-height:0; overflow:auto; visibility:hidden; zoom:1; }            @media (max-width: 768px) { #fsb-social-bar.fsb-fixed { position: relative !important; top: auto !important; } }        </style><span class="fsb-title">Share this article</span><div class="fsb-share-facebook"><a href="http://www.facebook.com/sharer.php?u=http://www.gajotres.net/building-a-native-mobile-app-with-phonegap-and-jquery-mobile-1-4/" class="socialite facebook fsb-facebook" data-fsb-service="facebook" data-href="http://www.gajotres.net/building-a-native-mobile-app-with-phonegap-and-jquery-mobile-1-4/" data-send="false" data-layout="button_count" data-width="60" data-show-faces="false" rel="nofollow" target="_blank"><span class="fsb-service-title">Facebook</span><span class="fsb-count">14</span></a></div><div class="fsb-share-linkedin"><a href="https://www.linkedin.com/cws/share?url=http://www.gajotres.net/building-a-native-mobile-app-with-phonegap-and-jquery-mobile-1-4/" class="socialite linkedin fsb-linkedin" data-fsb-service="linkedin" data-size="medium" data-href="http://www.gajotres.net/building-a-native-mobile-app-with-phonegap-and-jquery-mobile-1-4/" rel="nofollow" target="_blank"><span class="fsb-service-title">LinkedIn</span><span class="fsb-count">6</span></a></div><div class="fsb-share-twitter"><a href="https://twitter.com/share?original_referer=http%3A%2F%2Fwww.gajotres.net%2F&amp;source=tweetbutton&amp;text=Building+a+Native+Mobile+App+with+Phonegap+and+jQuery+Mobile+1.4&amp;url=http%3A%2F%2Fwww.gajotres.net%2Fbuilding-a-native-mobile-app-with-phonegap-and-jquery-mobile-1-4%2F&amp;via=gajotres" class="socialite twitter fsb-twitter" data-fsb-service="twitter" rel="nofollow" target="_blank" title="7 retweets so far"><span class="fsb-service-title">Twitter</span><span class="fsb-count">7</span></a></div><div class="fsb-share-google fsb-hide-count"><a href="https://plus.google.com/share?url=http://www.gajotres.net/building-a-native-mobile-app-with-phonegap-and-jquery-mobile-1-4/" class="socialite googleplus fsb-google" data-fsb-service="google" data-size="medium" data-href="http://www.gajotres.net/building-a-native-mobile-app-with-phonegap-and-jquery-mobile-1-4/" rel="nofollow" target="_blank"><span class="fsb-service-title">Google+</span><span class="fsb-count">0</span></a></div></div><div class="fsb-clear"></div><a href="http://www.gajotres.net/wp-content/uploads/2013/10/Phonegap_tutorial.jpg"><img src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/Phonegap_tutorial.jpg" alt="PhoneGap jQuery Mobile tutorial" class="alignnone size-full wp-image-211" height="400" width="1024"></a><div style="width:100%height: 0.35em;">&nbsp;</div>For
 those of you who don’t know this is a rather complex topic. For 
starters, you’re here to learn how to successfully combine jQuery Mobile
 with PhoneGap, let me first tell you something about them. jQuery 
mobile framework takes the “write less, do more” mantra to the next 
level: Instead of writing unique apps for each mobile device or OS, the 
jQuery mobile framework allows you to design a single highly-branded web
 site or application that will work on all popular smartphone, tablet, 
and desktop platforms. Everything mentioned here helped it in its rise 
to popularity.<div style="width:100%height: 0.35em;">&nbsp;</div>

On the other hand, PhoneGap is a free and open source framework that 
allows you to create mobile apps using standardized web APIs for the 
platforms you care about. It can/will be used as a native wrapper for 
your/our mobile applications.<div style="width:100%height: 0.35em;">&nbsp;</div>
 

PhoneGap is a distribution of Apache Cordova. You can think of Apache 
Cordova as the engine that powers PhoneGap, similar to how WebKit is the
 engine that powers Chrome or Safari. That’s why, later in this article,
 you will need to download Cordova archive but I will still talk about 
it like it is a PhoneGap. If you want to understand this better read 
this excellent PhoneGap developers <a href="http://phonegap.com/2012/03/19/phonegap-cordova-and-what%E2%80%99s-in-a-name/"><strong>article</strong></a>.<div style="width:100%height: 0.35em;">&nbsp;</div>

This article is intended to show you how to successfully combine jQuery 
Mobile, steer around some implementation obstacles and make it as fast 
as humanly possible. You have probably heard about the bad performance 
of PhoneGap applications, because of that, many developers stopped 
developing any jQuery Mobile PhoneGap applications. Is this a bad 
combination? Answer is yes and no. jQuery Mobile was never intended to 
be used in a such way, nor was PhoneGap intended to work with a such 
complex framework. Thankfully situation is not that bad, this 
combination can work successfully as long as you ready to learn proper 
design patterns.<div style="width:100%height: 0.35em;">&nbsp;</div>
<span id="more-3306"></span>
For the test purpose we will create a small hybrid Android jQuery Mobile
 application from the perspective of Windows OS and Eclipse IDE. If 
readers show enough interest I will also create a iOS / MacOS 
combination (<strong>EDIT</strong>: After several requests I have created article related to MacOS, link can be found <a href="http://www.gajotres.net/creating-phonegap-project-on-macos/"><strong>here</strong></a>).<div style="width:100%height: 0.35em;">&nbsp;</div>

<h1>Preparations</h1><hr><div style="width:100%height: 0.35em;">&nbsp;</div><div style="width:100%height: 0.35em;">&nbsp;</div>

Download the listed software:<div style="width:100%height: 0.35em;">&nbsp;</div>

<ul>
	<li>Install Apache Ant</li>
	<li>Install Java JDK</li>
	<li>Download and extract Eclipse</li>
	<li>Install the Android ADT Plugin for Eclipse</li>
	<li>Install the Android SDK</li>
	<li>Download and extract PhoneGap</li>
</ul><div style="width:100%height: 0.35em;">&nbsp;</div>

<h5>Install Apache Ant</h5><div style="width:100%height: 0.35em;">&nbsp;</div>

Go to the official Apache Ant site and download latest version, or any other if you don’t like to use newer versions.<div style="width:100%height: 0.35em;">&nbsp;</div>

<strong>Download link:</strong> <a href="http://ant.apache.org/bindownload.cgi">http://ant.apache.org/bindownload.cgi</a><div style="width:100%height: 0.35em;">&nbsp;</div>

Create a new ANT directory (where ever you prefer) and unpack a downloaded archive. It should look something like this: <span class="su-highlight" style="background:#e9e9e9;color:#000000">&nbsp;C:\Android\ANT\apache-ant-1.9.2&nbsp;</span><div style="width:100%height: 0.35em;">&nbsp;</div>

Use this location and create a new environment variable called <span class="su-highlight" style="background:#e9e9e9;color:#000000">&nbsp;ANT_HOME&nbsp;</span>, also use this variable and add it to your PATH like this: <span class="su-highlight" style="background:#e9e9e9;color:#000000">&nbsp;%ANT_HOME%\bin&nbsp;</span>. Take a look at this <a href="http://www.computerhope.com/issues/ch000549.htm"><strong>tutorial</strong></a> if you don’t know how to do that, you will find an examples for Windows XP, Windows 2000 and Windows 7.<div style="width:100%height: 0.35em;">&nbsp;</div>

It should look like this:<div style="width:100%height: 0.35em;">&nbsp;</div>

<span style="width: 369px;" class="su-frame su-frame-align-center su-frame-style-default"><span class="su-frame-inner"><img src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/ant_home.jpg" alt="ANT HOME" class="size-full wp-image-211" height="153" width="357"></span></span>
<span style="width: 369px;" class="su-frame su-frame-align-center su-frame-style-default"><span class="su-frame-inner"><img src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/ant_path.jpg" alt="ANT PATH" class="size-full wp-image-211" height="153" width="357"></span></span><div style="width:100%height: 0.35em;">&nbsp;</div>

<h5>Install Java JDK</h5><div style="width:100%height: 0.35em;">&nbsp;</div>

Go to the official Oracle Java site and download latest Java JDK 
version, be careful not to download Java JRE instead. You will also need
 to create an  official Oracle account. Be careful to install a correct 
32bit or 64 bit version (this <a href="http://windows.microsoft.com/en-us/windows7/find-out-32-or-64-bit"><strong>tutorial</strong></a> will show you how to find this information).<div style="width:100%height: 0.35em;">&nbsp;</div>

<strong>Download link:</strong> <a href="http://www.oracle.com/technetwork/java/javase/downloads/index.html">http://www.oracle.com/technetwork/java/javase/downloads/index.html</a><div style="width:100%height: 0.35em;">&nbsp;</div>

Install it where ever you want, just remember its location. For example it should look like this: <span class="su-highlight" style="background:#e9e9e9;color:#000000">&nbsp;C:\Program Files\Java\jdk1.7.0_09\&nbsp;</span><div style="width:100%height: 0.35em;">&nbsp;</div>

Now, just like with an ANT, create a new environment variable called <span class="su-highlight" style="background:#e9e9e9;color:#000000">&nbsp;JAVA_HOME&nbsp;</span> and add a location to your JAVA installation folder. Then add it to the <span class="su-highlight" style="background:#e9e9e9;color:#000000">&nbsp;PATH&nbsp;</span>. It should look like this:<div style="width:100%height: 0.35em;">&nbsp;</div>

<span style="width: 369px;" class="su-frame su-frame-align-center su-frame-style-default"><span class="su-frame-inner"><img src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/java_home.jpg" alt="JAVA HOME" class="size-full wp-image-211" height="153" width="357"></span></span>
<span style="width: 369px;" class="su-frame su-frame-align-center su-frame-style-default"><span class="su-frame-inner"><img src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/java_path.jpg" alt="JAVA PATH" class="size-full wp-image-211" height="153" width="357"></span></span><div style="width:100%height: 0.35em;">&nbsp;</div>

<h5>Install the Android SDK</h5><div style="width:100%height: 0.35em;">&nbsp;</div>

Go to the official Android SDK site, click <span class="su-highlight" style="background:#e9e9e9;color:#000000">&nbsp;“USE AN EXISTING IDE”&nbsp;</span> and download the latest version.<div style="width:100%height: 0.35em;">&nbsp;</div>


<!-- Quick Adsense WordPress Plugin: http://quicksense.net/ -->
<div style="float:none;margin:10px 0 10px 0;text-align:center;">
<script async="" src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/adsbygoogle.js"></script>
<!-- Post - Middle 1 -->
<ins data-adsbygoogle-status="done" class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2165291328933509" data-ad-slot="9281565472"><ins style="display:inline-table;border:none;height:250px;margin:0;padding:0;position:relative;visibility:visible;width:300px;background-color:transparent"><ins id="aswift_1_anchor" style="display:block;border:none;height:250px;margin:0;padding:0;position:relative;visibility:visible;width:300px;background-color:transparent"><iframe marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" onload="var i=this.id,s=window.google_iframe_oncopy,H=s&amp;&amp;s.handlers,h=H&amp;&amp;H[i],w=this.contentWindow,d;try{d=w.document}catch(e){}if(h&amp;&amp;d&amp;&amp;(!d.body||!d.body.firstChild)){if(h.call){setTimeout(h,0)}else if(h.match){try{h=s.upd(h,i)}catch(e){}w.location.replace(h)}}" id="aswift_1" name="aswift_1" style="left:0;position:absolute;top:0;" frameborder="0" height="250" scrolling="no" width="300"></iframe></ins></ins></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<div style="width:100%height: 0.35em;">&nbsp;</div> 

<span style="width: 769px;" class="su-frame su-frame-align-center su-frame-style-default"><span class="su-frame-inner"><img src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/android_sdk.jpg" alt="SDK DOWNLOAD" class="size-full wp-image-211" height="165" width="757"></span></span><div style="width:100%height: 0.35em;">&nbsp;</div>

<strong>Download link:</strong> <a href="http://developer.android.com/sdk/index.html">http://developer.android.com/sdk/index.html</a><div style="width:100%height: 0.35em;">&nbsp;</div>

Install it where ever you want, just remember its location. For example it should look like this: <span class="su-highlight" style="background:#e9e9e9;color:#000000">&nbsp;C:\Android\android-sdk\sdk&nbsp;</span>. Create new environment variable called <span class="su-highlight" style="background:#e9e9e9;color:#000000">&nbsp;ANDROID_HOME&nbsp;</span> and add previously mentioned link. Now add two additional <span class="su-highlight" style="background:#e9e9e9;color:#000000">&nbsp;PATH&nbsp;</span> locations <span class="su-highlight" style="background:#e9e9e9;color:#000000">&nbsp;%ANDROID_HOME%\platform-tools;&nbsp;</span> and <span class="su-highlight" style="background:#e9e9e9;color:#000000">&nbsp;%ANDROID_HOME%\tools;&nbsp;</span>. Everything should look like this:<div style="width:100%height: 0.35em;">&nbsp;</div>

<span style="width: 369px;" class="su-frame su-frame-align-center su-frame-style-default"><span class="su-frame-inner"><img src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/android_home.jpg" alt="ANDROID SDK HOME" class="size-full wp-image-211" height="153" width="357"></span></span>
<span style="width: 369px;" class="su-frame su-frame-align-center su-frame-style-default"><span class="su-frame-inner"><img src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/android_path1.jpg" alt="ANDROID PATH 1" class="size-full wp-image-211" height="153" width="357"></span></span>
<span style="width: 369px;" class="su-frame su-frame-align-center su-frame-style-default"><span class="su-frame-inner"><img src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/android_path2.jpg" alt="ANDROID PATH 2" class="size-full wp-image-211" height="153" width="357"></span></span><div style="width:100%height: 0.35em;">&nbsp;</div>

<h5>Download and extract Eclipse</h5><div style="width:100%height: 0.35em;">&nbsp;</div>

Go to the official Eclipse IDE site and download latest Eclipse Standard
 version, or Eclipse for Java Developers if you prefer a smaller 
installation. Again be careful to download correct 32bit or 64bit 
version.<div style="width:100%height: 0.35em;">&nbsp;</div>

<strong>Download link:</strong> <a href="http://www.eclipse.org/downloads/">http://www.eclipse.org/downloads/</a><div style="width:100%height: 0.35em;">&nbsp;</div>

Finally create a new directory and extract Eclipse archive. It should look like this: <span class="su-highlight" style="background:#e9e9e9;color:#000000">&nbsp;C:\Android\Eclipse\&nbsp;</span>. Open Eclipse directory and create a shortcut if you want, now double click and execute <span class="su-highlight" style="background:#e9e9e9;color:#000000">&nbsp;Eclipse.exe&nbsp;</span>. Close the welcome tab and then select Help -&gt; Install new software, follow images found below and install the ADT Plugin.<div style="width:100%height: 0.35em;">&nbsp;</div>

<span style="width: 865px;" class="su-frame su-frame-align-center su-frame-style-default"><span class="su-frame-inner"><img src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/plugin_screen1.jpg" alt="ANDROID SDK HOME" class="size-full wp-image-211" height="690" width="853"></span></span>
<span style="width: 865px;" class="su-frame su-frame-align-center su-frame-style-default"><span class="su-frame-inner"><img src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/plugin_screen2.jpg" alt="ANDROID PATH 1" class="size-full wp-image-211" height="690" width="853"></span></span>
<span style="width: 865px;" class="su-frame su-frame-align-center su-frame-style-default"><span class="su-frame-inner"><img src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/plugin_screen3.jpg" alt="ANDROID PATH 2" class="size-full wp-image-211" height="690" width="853"></span></span>
<span style="width: 865px;" class="su-frame su-frame-align-center su-frame-style-default"><span class="su-frame-inner"><img src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/plugin_screen4.jpg" alt="ANDROID PATH 2" class="size-full wp-image-211" height="690" width="853"></span></span><div style="width:100%height: 0.35em;">&nbsp;</div>

When installation ends you will be prompted to restart Eclipse, do so 
and wait for it to open again. When Eclipse shows again it will open 
Android SDK manager and offer you to download needed Android versions. I
 would advise you to download only versions you will use for your 
development because this step will take a long time to finish.<div style="width:100%height: 0.35em;">&nbsp;</div>

<span style="width: 948px;" class="su-frame su-frame-align-center su-frame-style-default"><span class="su-frame-inner"><img src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/sdk_update_1.jpg" alt="ANDROID SDK UPDATE" class="size-full wp-image-211" height="858" width="951"></span></span><div style="width:100%height: 0.35em;">&nbsp;</div>

Click <span class="su-highlight" style="background:#e9e9e9;color:#000000">&nbsp;Install XX packages&nbsp;</span>, select <span class="su-highlight" style="background:#e9e9e9;color:#000000">&nbsp;Accept&nbsp;</span>, read through the <span class="su-highlight" style="background:#e9e9e9;color:#000000">&nbsp;Package Description and License&nbsp;</span>, select <span class="su-highlight" style="background:#e9e9e9;color:#000000">&nbsp;Accept License&nbsp;</span> and click <span class="su-highlight" style="background:#e9e9e9;color:#000000">&nbsp;Install&nbsp;</span>.<div style="width:100%height: 0.35em;">&nbsp;</div>

<h5>Download and extract PhoneGap</h5><div style="width:100%height: 0.35em;">&nbsp;</div>

Go to the official Apache Cordova  site, and download the latest Cordova version.<div style="width:100%height: 0.35em;">&nbsp;</div>

<strong>Download link:</strong> <a href="http://cordova.apache.org/#download">http://cordova.apache.org/#download</a><div style="width:100%height: 0.35em;">&nbsp;</div>

Extract this archive, warning, it should be extracted in a directory 
path that don’t have spaces. For example it should look like this: <span class="su-highlight" style="background:#e9e9e9;color:#000000">&nbsp;C:\Android\cordova-3.0.0-src\cordova-3.0.0&nbsp;</span>. Go inside and extract a file named <span class="su-highlight" style="background:#e9e9e9;color:#000000">&nbsp;cordova-android.zip&nbsp;</span>. If you are using older Cordova version this file is going to have a different name, thankfully it always have text <span class="su-highlight" style="background:#e9e9e9;color:#000000">&nbsp;cordova-android&nbsp;</span> inside.<div style="width:100%height: 0.35em;">&nbsp;</div>

<h1>Creating and importing Eclipse project</h1><hr><div style="width:100%height: 0.35em;">&nbsp;</div><div style="width:100%height: 0.35em;">&nbsp;</div>

Open command prompt (cmd.exe) and go to the directory where you have 
extracted PhoneGap, now open directory bin. It location should look like
 this: <span class="su-highlight" style="background:#e9e9e9;color:#000000">&nbsp;C:\Android\cordova-3.0.0-src\cordova-3.0.0\bin&nbsp;</span>.<div style="width:100%height: 0.35em;">&nbsp;</div>

<span style="width: 609px;" class="su-frame su-frame-align-center su-frame-style-default"><span class="su-frame-inner"><img src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/cmd.jpg" alt="CMD" class="size-full wp-image-211" height="366" width="597"></span></span>

Now we will need to run the create command to create a new project. 
Before we do that few warnings. Project directory should not exist, 
create command will create it automatically, second thing, do not do 
this in an Eclipse workspace directory, this will result in a failure 
later.<div style="width:100%height: 0.35em;">&nbsp;</div>

Command line execution should look like this:<div style="width:100%height: 0.35em;">&nbsp;</div>

<span class="su-highlight" style="background:#e9e9e9;color:#000000">&nbsp;C:\Android\cordova-3.0.0-src\cordova-3.0.0\bin&gt;create
 C:\Android\Project\PhoneGap_example com.test.example projectname&nbsp;</span><div style="width:100%height: 0.35em;">&nbsp;</div>

Create command execution should look like this:<div style="width:100%height: 0.35em;">&nbsp;</div>

<span style="width: 689px;" class="su-frame su-frame-align-center su-frame-style-default"><span class="su-frame-inner"><img src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/cmd_create.jpg" alt="CMD" class="size-full wp-image-211" height="395" width="677"></span></span><div style="width:100%height: 0.35em;">&nbsp;</div>

Where <span class="su-highlight" style="background:#e9e9e9;color:#000000">&nbsp;C:\Android\Project\PhoneGap_example&nbsp;</span> is our non existent directory, <span class="su-highlight" style="background:#e9e9e9;color:#000000">&nbsp;com.test.example&nbsp;</span> should always be a unique and <span class="su-highlight" style="background:#e9e9e9;color:#000000">&nbsp;projectname&nbsp;</span> is your arbitrary project name.<div style="width:100%height: 0.35em;">&nbsp;</div>

A new project should/will be created. Check that project was really 
created. To be sure go to your project directory 
(C:\Android\Project\PhoneGap_example in my case), if it exist and if 
there’s a content inside you are fine.<div style="width:100%height: 0.35em;">&nbsp;</div>

Open Eclipse again and press <span class="su-highlight" style="background:#e9e9e9;color:#000000">&nbsp;CTRL-N&nbsp;</span>, select <span class="su-highlight" style="background:#e9e9e9;color:#000000">&nbsp;Android Project from Existing Code&nbsp;</span> -&gt; select your project directory location -&gt; select the new created project and click Finish.<div style="width:100%height: 0.35em;">&nbsp;</div>

<h5>Installation notes</h5><div style="width:100%height: 0.35em;">&nbsp;</div>

Everything done here can also be done manually in a much shorter way. 
All you need is Java JDK (configured like above), Android SDK that 
already comes with Eclipse and ADT Plugin. This method also requires you
 to manually create and configure your project and that is completely 
another story. Showed solution require more time for installation and 
configurations but you will save some much time with automatic project 
creation process. <div style="width:100%height: 0.35em;">&nbsp;</div>

<h1>Lets build our jQuery Mobile application</h1><hr><div style="width:100%height: 0.35em;">&nbsp;</div><div style="width:100%height: 0.35em;">&nbsp;</div>

<span class="su-highlight" style="background:#e9e9e9;color:#000000">&nbsp;jQuery Mobile 1.4&nbsp;</span>
 beta has been selected for this application. As previously mentioned, 
jQuery Mobile don’t behave properly when combined with PhoneGap, one of 
the main reasons for that is heavy use of CSS. This will change with the
 new jQuery Mobile version. To improve performance developers reduced 
DOM manipulation as much as possible. Generation of inner markup for 
elements styled as buttons has been completely removed. In many cases, 
the framework just adds classes to the native element during 
enhancement, amount of classes that are added by the framework has also 
been heavily reduced.<div style="width:100%height: 0.35em;">&nbsp;</div>

<div style="width:100%height: 0.35em;">&nbsp;</div> 

Application will use external JSON source, specifically <span class="su-highlight" style="background:#e9e9e9;color:#000000">&nbsp;themoviedb&nbsp;</span> database. And to make it more interesting, iScroll will be used for more native like scrolling. <div style="width:100%height: 0.35em;">&nbsp;</div>

<h5>HTML</h5><div style="width:100%height: 0.35em;">&nbsp;</div>

<div><div id="highlighter_203356" class="syntaxhighlighter  xml"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="gutter"><div class="line number1 index0 alt2">1</div><div class="line number2 index1 alt1">2</div><div class="line number3 index2 alt2">3</div><div class="line number4 index3 alt1">4</div><div class="line number5 index4 alt2">5</div><div class="line number6 index5 alt1">6</div><div class="line number7 index6 alt2">7</div><div class="line number8 index7 alt1">8</div><div class="line number9 index8 alt2">9</div><div class="line number10 index9 alt1">10</div><div class="line number11 index10 alt2">11</div><div class="line number12 index11 alt1">12</div><div class="line number13 index12 alt2">13</div><div class="line number14 index13 alt1">14</div><div class="line number15 index14 alt2">15</div><div class="line number16 index15 alt1">16</div><div class="line number17 index16 alt2">17</div><div class="line number18 index17 alt1">18</div><div class="line number19 index18 alt2">19</div><div class="line number20 index19 alt1">20</div><div class="line number21 index20 alt2">21</div><div class="line number22 index21 alt1">22</div><div class="line number23 index22 alt2">23</div><div class="line number24 index23 alt1">24</div><div class="line number25 index24 alt2">25</div><div class="line number26 index25 alt1">26</div><div class="line number27 index26 alt2">27</div><div class="line number28 index27 alt1">28</div><div class="line number29 index28 alt2">29</div><div class="line number30 index29 alt1">30</div></td><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="xml plain">&lt;</code><code class="xml keyword">div</code> <code class="xml color1">data-role</code><code class="xml plain">=</code><code class="xml string">"page"</code> <code class="xml color1">id</code><code class="xml plain">=</code><code class="xml string">"home"</code><code class="xml plain">&gt;</code></div><div class="line number2 index1 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;</code><code class="xml keyword">div</code> <code class="xml color1">data-theme</code><code class="xml plain">=</code><code class="xml string">"a"</code> <code class="xml color1">data-role</code><code class="xml plain">=</code><code class="xml string">"header"</code><code class="xml plain">&gt;</code></div><div class="line number3 index2 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;</code><code class="xml keyword">h3</code><code class="xml plain">&gt;</code></div><div class="line number4 index3 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">Movie List</code></div><div class="line number5 index4 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;/</code><code class="xml keyword">h3</code><code class="xml plain">&gt;</code></div><div class="line number6 index5 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;/</code><code class="xml keyword">div</code><code class="xml plain">&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code></div><div class="line number7 index6 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;</code><code class="xml keyword">div</code> <code class="xml color1">data-role</code><code class="xml plain">=</code><code class="xml string">"content"</code><code class="xml plain">&gt;</code></div><div class="line number8 index7 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;</code><code class="xml keyword">div</code> <code class="xml color1">class</code><code class="xml plain">=</code><code class="xml string">"example-wrapper"</code> <code class="xml plain">data-iscroll&gt;</code></div><div class="line number9 index8 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;</code><code class="xml keyword">ul</code> <code class="xml color1">data-role</code><code class="xml plain">=</code><code class="xml string">"listview"</code>&nbsp; <code class="xml color1">id</code><code class="xml plain">=</code><code class="xml string">"movie-list"</code> <code class="xml color1">data-theme</code><code class="xml plain">=</code><code class="xml string">"a"</code><code class="xml plain">&gt;</code></div><div class="line number10 index9 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;</div><div class="line number11 index10 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;/</code><code class="xml keyword">ul</code><code class="xml plain">&gt;</code></div><div class="line number12 index11 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;/</code><code class="xml keyword">div</code><code class="xml plain">&gt;</code></div><div class="line number13 index12 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;/</code><code class="xml keyword">div</code><code class="xml plain">&gt;</code></div><div class="line number14 index13 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;</code><code class="xml keyword">div</code> <code class="xml color1">data-theme</code><code class="xml plain">=</code><code class="xml string">"a"</code> <code class="xml color1">data-role</code><code class="xml plain">=</code><code class="xml string">"footer"</code><code class="xml plain">&gt;</code></div><div class="line number15 index14 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;</code><code class="xml keyword">h1</code><code class="xml plain">&gt;Copyright 2013&lt;/</code><code class="xml keyword">h1</code><code class="xml plain">&gt;</code></div><div class="line number16 index15 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;/</code><code class="xml keyword">div</code><code class="xml plain">&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code></div><div class="line number17 index16 alt2"><code class="xml plain">&lt;/</code><code class="xml keyword">div</code><code class="xml plain">&gt;</code></div><div class="line number18 index17 alt1"><code class="xml plain">&lt;</code><code class="xml keyword">div</code> <code class="xml color1">data-role</code><code class="xml plain">=</code><code class="xml string">"page"</code> <code class="xml color1">id</code><code class="xml plain">=</code><code class="xml string">"headline"</code><code class="xml plain">&gt;</code></div><div class="line number19 index18 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;</code><code class="xml keyword">div</code> <code class="xml color1">data-theme</code><code class="xml plain">=</code><code class="xml string">"a"</code> <code class="xml color1">data-role</code><code class="xml plain">=</code><code class="xml string">"header"</code><code class="xml plain">&gt;</code></div><div class="line number20 index19 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;</code><code class="xml keyword">a</code> <code class="xml color1">href</code><code class="xml plain">=</code><code class="xml string">"#home"</code> <code class="xml color1">class</code><code class="xml plain">=</code><code class="xml string">"ui-btn-left"</code> <code class="xml color1">data-transition</code><code class="xml plain">=</code><code class="xml string">"slide"</code> <code class="xml color1">data-direction</code><code class="xml plain">=</code><code class="xml string">"reverse"</code><code class="xml plain">&gt;Back&lt;/</code><code class="xml keyword">a</code><code class="xml plain">&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 </code></div><div class="line number21 index20 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;</code><code class="xml keyword">h3</code><code class="xml plain">&gt;</code></div><div class="line number22 index21 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">Movie Info</code></div><div class="line number23 index22 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;/</code><code class="xml keyword">h3</code><code class="xml plain">&gt;</code></div><div class="line number24 index23 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;/</code><code class="xml keyword">div</code><code class="xml plain">&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code></div><div class="line number25 index24 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;</code><code class="xml keyword">div</code> <code class="xml color1">data-role</code><code class="xml plain">=</code><code class="xml string">"content"</code><code class="xml plain">&gt;</code></div><div class="line number26 index25 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;</code><code class="xml keyword">ul</code> <code class="xml color1">data-role</code><code class="xml plain">=</code><code class="xml string">"listview"</code>&nbsp; <code class="xml color1">id</code><code class="xml plain">=</code><code class="xml string">"movie-data"</code> <code class="xml color1">data-theme</code><code class="xml plain">=</code><code class="xml string">"a"</code><code class="xml plain">&gt;</code></div><div class="line number27 index26 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;</div><div class="line number28 index27 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;/</code><code class="xml keyword">ul</code><code class="xml plain">&gt;</code></div><div class="line number29 index28 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;/</code><code class="xml keyword">div</code><code class="xml plain">&gt;</code></div><div class="line number30 index29 alt1"><code class="xml plain">&lt;/</code><code class="xml keyword">div</code><code class="xml plain">&gt;&nbsp;&nbsp;&nbsp; </code></div></div></td></tr></tbody></table></div></div><div style="width:100%height: 0.35em;">&nbsp;</div>

<h5>Javascript</h5><div style="width:100%height: 0.35em;">&nbsp;</div>

<div><div id="highlighter_155439" class="syntaxhighlighter  jscript"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="gutter"><div class="line number1 index0 alt2">1</div><div class="line number2 index1 alt1">2</div><div class="line number3 index2 alt2">3</div><div class="line number4 index3 alt1">4</div><div class="line number5 index4 alt2">5</div><div class="line number6 index5 alt1">6</div><div class="line number7 index6 alt2">7</div><div class="line number8 index7 alt1">8</div><div class="line number9 index8 alt2">9</div><div class="line number10 index9 alt1">10</div><div class="line number11 index10 alt2">11</div><div class="line number12 index11 alt1">12</div><div class="line number13 index12 alt2">13</div><div class="line number14 index13 alt1">14</div><div class="line number15 index14 alt2">15</div><div class="line number16 index15 alt1">16</div><div class="line number17 index16 alt2">17</div><div class="line number18 index17 alt1">18</div><div class="line number19 index18 alt2">19</div><div class="line number20 index19 alt1">20</div><div class="line number21 index20 alt2">21</div><div class="line number22 index21 alt1">22</div><div class="line number23 index22 alt2">23</div><div class="line number24 index23 alt1">24</div><div class="line number25 index24 alt2">25</div><div class="line number26 index25 alt1">26</div><div class="line number27 index26 alt2">27</div><div class="line number28 index27 alt1">28</div><div class="line number29 index28 alt2">29</div><div class="line number30 index29 alt1">30</div><div class="line number31 index30 alt2">31</div><div class="line number32 index31 alt1">32</div><div class="line number33 index32 alt2">33</div><div class="line number34 index33 alt1">34</div><div class="line number35 index34 alt2">35</div><div class="line number36 index35 alt1">36</div><div class="line number37 index36 alt2">37</div><div class="line number38 index37 alt1">38</div><div class="line number39 index38 alt2">39</div><div class="line number40 index39 alt1">40</div><div class="line number41 index40 alt2">41</div><div class="line number42 index41 alt1">42</div><div class="line number43 index42 alt2">43</div><div class="line number44 index43 alt1">44</div><div class="line number45 index44 alt2">45</div><div class="line number46 index45 alt1">46</div><div class="line number47 index46 alt2">47</div><div class="line number48 index47 alt1">48</div><div class="line number49 index48 alt2">49</div><div class="line number50 index49 alt1">50</div><div class="line number51 index50 alt2">51</div><div class="line number52 index51 alt1">52</div><div class="line number53 index52 alt2">53</div></td><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="jscript plain">$(document).on(</code><code class="jscript string">'pageinit'</code><code class="jscript plain">, </code><code class="jscript string">'#home'</code><code class="jscript plain">, </code><code class="jscript keyword">function</code><code class="jscript plain">(){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code></div><div class="line number2 index1 alt1"><code class="jscript spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">var</code> <code class="jscript plain">url = </code><code class="jscript string">'<a href="http://api.themoviedb.org/3/">http://api.themoviedb.org/3/</a>'</code><code class="jscript plain">,</code></div><div class="line number3 index2 alt2"><code class="jscript spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">mode = </code><code class="jscript string">'search/movie?query='</code><code class="jscript plain">,</code></div><div class="line number4 index3 alt1"><code class="jscript spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">movieName = </code><code class="jscript string">'&amp;query='</code><code class="jscript plain">+encodeURI(</code><code class="jscript string">'Batman'</code><code class="jscript plain">),&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code></div><div class="line number5 index4 alt2"><code class="jscript spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">key = </code><code class="jscript string">'&amp;api_key=470fd2ec8853e25d2f8d86f685d2270e'</code><code class="jscript plain">;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code></div><div class="line number6 index5 alt1"><code class="jscript spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;</div><div class="line number7 index6 alt2"><code class="jscript spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">$.ajax({</code></div><div class="line number8 index7 alt1"><code class="jscript spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">url: url + mode + key + movieName ,</code></div><div class="line number9 index8 alt2"><code class="jscript spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">dataType: </code><code class="jscript string">"jsonp"</code><code class="jscript plain">,</code></div><div class="line number10 index9 alt1"><code class="jscript spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">async: </code><code class="jscript keyword">true</code><code class="jscript plain">,</code></div><div class="line number11 index10 alt2"><code class="jscript spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">success: </code><code class="jscript keyword">function</code> <code class="jscript plain">(result) {</code></div><div class="line number12 index11 alt1"><code class="jscript spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">ajax.parseJSONP(result);</code></div><div class="line number13 index12 alt2"><code class="jscript spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">},</code></div><div class="line number14 index13 alt1"><code class="jscript spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">error: </code><code class="jscript keyword">function</code> <code class="jscript plain">(request,error) {</code></div><div class="line number15 index14 alt2"><code class="jscript spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">alert(</code><code class="jscript string">'Network error has occurred please try again!'</code><code class="jscript plain">);</code></div><div class="line number16 index15 alt1"><code class="jscript spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></div><div class="line number17 index16 alt2"><code class="jscript spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">});&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code></div><div class="line number18 index17 alt1"><code class="jscript plain">});</code></div><div class="line number19 index18 alt2">&nbsp;</div><div class="line number20 index19 alt1"><code class="jscript plain">$(document).on(</code><code class="jscript string">'pagebeforeshow'</code><code class="jscript plain">, </code><code class="jscript string">'#headline'</code><code class="jscript plain">, </code><code class="jscript keyword">function</code><code class="jscript plain">(){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code></div><div class="line number21 index20 alt2"><code class="jscript spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">$(</code><code class="jscript string">'#movie-data'</code><code class="jscript plain">).empty();</code></div><div class="line number22 index21 alt1"><code class="jscript spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">$.each(movieInfo.result, </code><code class="jscript keyword">function</code><code class="jscript plain">(i, row) {</code></div><div class="line number23 index22 alt2"><code class="jscript spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript keyword">if</code><code class="jscript plain">(row.id == movieInfo.id) {</code></div><div class="line number24 index23 alt1"><code class="jscript spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">$(</code><code class="jscript string">'#movie-data'</code><code class="jscript plain">).append(</code><code class="jscript string">'&lt;li&gt;&lt;img src="<a href="http://d3gtl9l2a4fn1j.cloudfront.net/t/p/w185">http://d3gtl9l2a4fn1j.cloudfront.net/t/p/w185</a>'</code><code class="jscript plain">+row.poster_path+</code><code class="jscript string">'"&gt;&lt;/li&gt;'</code><code class="jscript plain">);</code></div><div class="line number25 index24 alt2"><code class="jscript spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">$(</code><code class="jscript string">'#movie-data'</code><code class="jscript plain">).append(</code><code class="jscript string">'&lt;li&gt;Title: '</code><code class="jscript plain">+row.original_title+</code><code class="jscript string">'&lt;/li&gt;'</code><code class="jscript plain">);</code></div><div class="line number26 index25 alt1"><code class="jscript spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">$(</code><code class="jscript string">'#movie-data'</code><code class="jscript plain">).append(</code><code class="jscript string">'&lt;li&gt;Release date'</code><code class="jscript plain">+row.release_date+</code><code class="jscript string">'&lt;/li&gt;'</code><code class="jscript plain">);</code></div><div class="line number27 index26 alt2"><code class="jscript spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">$(</code><code class="jscript string">'#movie-data'</code><code class="jscript plain">).append(</code><code class="jscript string">'&lt;li&gt;Popularity : '</code><code class="jscript plain">+row.popularity+</code><code class="jscript string">'&lt;/li&gt;'</code><code class="jscript plain">);&nbsp;&nbsp; </code></div><div class="line number28 index27 alt1"><code class="jscript spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">$(</code><code class="jscript string">'#movie-data'</code><code class="jscript plain">).append(</code><code class="jscript string">'&lt;li&gt;Popularity : '</code><code class="jscript plain">+row.vote_average+</code><code class="jscript string">'&lt;/li&gt;'</code><code class="jscript plain">);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code></div><div class="line number29 index28 alt2"><code class="jscript spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">$(</code><code class="jscript string">'#movie-data'</code><code class="jscript plain">).listview(</code><code class="jscript string">'refresh'</code><code class="jscript plain">);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code></div><div class="line number30 index29 alt1"><code class="jscript spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></div><div class="line number31 index30 alt2"><code class="jscript spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">});&nbsp;&nbsp;&nbsp; </code></div><div class="line number32 index31 alt1"><code class="jscript plain">});</code></div><div class="line number33 index32 alt2">&nbsp;</div><div class="line number34 index33 alt1"><code class="jscript plain">$(document).on(</code><code class="jscript string">'vclick'</code><code class="jscript plain">, </code><code class="jscript string">'#movie-list li a'</code><code class="jscript plain">, </code><code class="jscript keyword">function</code><code class="jscript plain">(){&nbsp; </code></div><div class="line number35 index34 alt2"><code class="jscript spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">movieInfo.id = $(</code><code class="jscript keyword">this</code><code class="jscript plain">).attr(</code><code class="jscript string">'data-id'</code><code class="jscript plain">);</code></div><div class="line number36 index35 alt1"><code class="jscript spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">$.mobile.changePage( </code><code class="jscript string">"#headline"</code><code class="jscript plain">, { transition: </code><code class="jscript string">"slide"</code><code class="jscript plain">, changeHash: </code><code class="jscript keyword">false</code> <code class="jscript plain">});</code></div><div class="line number37 index36 alt2"><code class="jscript plain">});</code></div><div class="line number38 index37 alt1">&nbsp;</div><div class="line number39 index38 alt2"><code class="jscript keyword">var</code> <code class="jscript plain">movieInfo = {</code></div><div class="line number40 index39 alt1"><code class="jscript spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">id : </code><code class="jscript keyword">null</code><code class="jscript plain">,</code></div><div class="line number41 index40 alt2"><code class="jscript spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">result : </code><code class="jscript keyword">null</code></div><div class="line number42 index41 alt1"><code class="jscript plain">}</code></div><div class="line number43 index42 alt2">&nbsp;</div><div class="line number44 index43 alt1"><code class="jscript keyword">var</code> <code class="jscript plain">ajax = {&nbsp; </code></div><div class="line number45 index44 alt2"><code class="jscript spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">parseJSONP:</code><code class="jscript keyword">function</code><code class="jscript plain">(result){&nbsp; </code></div><div class="line number46 index45 alt1"><code class="jscript spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">movieInfo.result = result.results;</code></div><div class="line number47 index46 alt2"><code class="jscript spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">$.each(result.results, </code><code class="jscript keyword">function</code><code class="jscript plain">(i, row) {</code></div><div class="line number48 index47 alt1"><code class="jscript spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">console.log(JSON.stringify(row));</code></div><div class="line number49 index48 alt2"><code class="jscript spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">$(</code><code class="jscript string">'#movie-list'</code><code class="jscript plain">).append(</code><code class="jscript string">'&lt;li&gt;&lt;a href="" data-id="'</code> <code class="jscript plain">+ row.id + </code><code class="jscript string">'"&gt;&lt;img src="<a href="http://d3gtl9l2a4fn1j.cloudfront.net/t/p/w185">http://d3gtl9l2a4fn1j.cloudfront.net/t/p/w185</a>'</code><code class="jscript plain">+row.poster_path+</code><code class="jscript string">'"/&gt;&lt;h3&gt;'</code> <code class="jscript plain">+ row.title + </code><code class="jscript string">'&lt;/h3&gt;&lt;p&gt;'</code> <code class="jscript plain">+ row.vote_average + </code><code class="jscript string">'/10&lt;/p&gt;&lt;/a&gt;&lt;/li&gt;'</code><code class="jscript plain">);</code></div><div class="line number50 index49 alt1"><code class="jscript spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">});</code></div><div class="line number51 index50 alt2"><code class="jscript spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">$(</code><code class="jscript string">'#movie-list'</code><code class="jscript plain">).listview(</code><code class="jscript string">'refresh'</code><code class="jscript plain">);</code></div><div class="line number52 index51 alt1"><code class="jscript spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="jscript plain">}</code></div><div class="line number53 index52 alt2"><code class="jscript plain">}&nbsp;&nbsp; </code></div></div></td></tr></tbody></table></div></div><div style="width:100%height: 0.35em;">&nbsp;</div>

<h5>CSS</h5><div style="width:100%height: 0.35em;">&nbsp;</div>

<div><div id="highlighter_999484" class="syntaxhighlighter  css"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="gutter"><div class="line number1 index0 alt2">1</div><div class="line number2 index1 alt1">2</div><div class="line number3 index2 alt2">3</div><div class="line number4 index3 alt1">4</div><div class="line number5 index4 alt2">5</div><div class="line number6 index5 alt1">6</div><div class="line number7 index6 alt2">7</div><div class="line number8 index7 alt1">8</div><div class="line number9 index8 alt2">9</div><div class="line number10 index9 alt1">10</div><div class="line number11 index10 alt2">11</div></td><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="css plain">.ui-content {</code></div><div class="line number2 index1 alt1"><code class="css spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="css keyword">padding</code><code class="css plain">: </code><code class="css value">0</code> <code class="css color3">!important</code><code class="css plain">;</code></div><div class="line number3 index2 alt2"><code class="css plain">}</code></div><div class="line number4 index3 alt1"><code class="css spaces">&nbsp;</code>&nbsp;</div><div class="line number5 index4 alt2"><code class="css plain">.ui-listview {</code></div><div class="line number6 index5 alt1"><code class="css spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="css keyword">margin</code><code class="css plain">: </code><code class="css value">0</code> <code class="css color3">!important</code><code class="css plain">;</code></div><div class="line number7 index6 alt2"><code class="css plain">}</code></div><div class="line number8 index7 alt1"><code class="css spaces">&nbsp;</code>&nbsp;</div><div class="line number9 index8 alt2"><code class="css plain">.example-wrapper, .example-wrapper div.iscroll-scroller {</code></div><div class="line number10 index9 alt1"><code class="css spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="css keyword">width</code><code class="css plain">: </code><code class="css value">100%</code> <code class="css color3">!important</code><code class="css plain">;</code></div><div class="line number11 index10 alt2"><code class="css plain">}</code></div></div></td></tr></tbody></table></div></div><div style="width:100%height: 0.35em;">&nbsp;</div>

<strong>Working example: </strong> <a href="http://jsfiddle.net/Gajotres/8uac7/">http://jsfiddle.net/Gajotres/8uac7/</a><div style="width:100%height: 0.35em;">&nbsp;</div>

<iframe src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/a.htm" allowfullscreen="allowfullscreen" frameborder="0" height="500" width="100%"></iframe><div style="width:100%height: 0.35em;">&nbsp;</div>

<h1>Lets mix everything up</h1><hr><div style="width:100%height: 0.35em;">&nbsp;</div><div style="width:100%height: 0.35em;">&nbsp;</div>

At this point we have a working Eclipse project and jQuery Mobile 
example, but before we can proceed we need to create a emulator in which
 we will simulate a Phone Device. Open Eclipse (if it’s not opened 
already) and click on <span class="su-highlight" style="background:#e9e9e9;color:#000000">&nbsp;Window&nbsp;</span> -&gt; <span class="su-highlight" style="background:#e9e9e9;color:#000000">&nbsp;Android Virtual Device Manager&nbsp;</span> -&gt; New window will open, click on tab <span class="su-highlight" style="background:#e9e9e9;color:#000000">&nbsp;Device Definitions&nbsp;</span>, pick a preselected device, click <span class="su-highlight" style="background:#e9e9e9;color:#000000">&nbsp;Create AVD&nbsp;</span> -&gt; change what ever you want and click <span class="su-highlight" style="background:#e9e9e9;color:#000000">&nbsp;OK&nbsp;</span>.<div style="width:100%height: 0.35em;">&nbsp;</div>

<span style="width: 712px;" class="su-frame su-frame-align-center su-frame-style-default"><span class="su-frame-inner"><img src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/emulator_1.jpg" alt="CMD" class="size-full wp-image-211" height="500" width="700"></span></span>
<span style="width: 528px;" class="su-frame su-frame-align-center su-frame-style-default"><span class="su-frame-inner"><img src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/emulator_2.jpg" alt="CMD" class="size-full wp-image-211" height="672" width="516"></span></span>
<span style="width: 712px;" class="su-frame su-frame-align-center su-frame-style-default"><span class="su-frame-inner"><img src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/emulator_3.jpg" alt="CMD" class="size-full wp-image-211" height="500" width="700"></span></span>

Let’s create a <span class="su-highlight" style="background:#e9e9e9;color:#000000">&nbsp;index.html&nbsp;</span> file from our jsFiddle example, it should look like this:<div style="width:100%height: 0.35em;">&nbsp;</div>

<div><div id="highlighter_853612" class="syntaxhighlighter  xml"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="gutter"><div class="line number1 index0 alt2">1</div><div class="line number2 index1 alt1">2</div><div class="line number3 index2 alt2">3</div><div class="line number4 index3 alt1">4</div><div class="line number5 index4 alt2">5</div><div class="line number6 index5 alt1">6</div><div class="line number7 index6 alt2">7</div><div class="line number8 index7 alt1">8</div><div class="line number9 index8 alt2">9</div><div class="line number10 index9 alt1">10</div><div class="line number11 index10 alt2">11</div><div class="line number12 index11 alt1">12</div><div class="line number13 index12 alt2">13</div><div class="line number14 index13 alt1">14</div><div class="line number15 index14 alt2">15</div><div class="line number16 index15 alt1">16</div><div class="line number17 index16 alt2">17</div><div class="line number18 index17 alt1">18</div><div class="line number19 index18 alt2">19</div><div class="line number20 index19 alt1">20</div><div class="line number21 index20 alt2">21</div><div class="line number22 index21 alt1">22</div><div class="line number23 index22 alt2">23</div><div class="line number24 index23 alt1">24</div><div class="line number25 index24 alt2">25</div><div class="line number26 index25 alt1">26</div><div class="line number27 index26 alt2">27</div><div class="line number28 index27 alt1">28</div><div class="line number29 index28 alt2">29</div><div class="line number30 index29 alt1">30</div><div class="line number31 index30 alt2">31</div><div class="line number32 index31 alt1">32</div><div class="line number33 index32 alt2">33</div><div class="line number34 index33 alt1">34</div><div class="line number35 index34 alt2">35</div><div class="line number36 index35 alt1">36</div><div class="line number37 index36 alt2">37</div><div class="line number38 index37 alt1">38</div><div class="line number39 index38 alt2">39</div><div class="line number40 index39 alt1">40</div><div class="line number41 index40 alt2">41</div><div class="line number42 index41 alt1">42</div><div class="line number43 index42 alt2">43</div><div class="line number44 index43 alt1">44</div><div class="line number45 index44 alt2">45</div><div class="line number46 index45 alt1">46</div><div class="line number47 index46 alt2">47</div><div class="line number48 index47 alt1">48</div><div class="line number49 index48 alt2">49</div><div class="line number50 index49 alt1">50</div><div class="line number51 index50 alt2">51</div><div class="line number52 index51 alt1">52</div><div class="line number53 index52 alt2">53</div><div class="line number54 index53 alt1">54</div><div class="line number55 index54 alt2">55</div><div class="line number56 index55 alt1">56</div><div class="line number57 index56 alt2">57</div><div class="line number58 index57 alt1">58</div><div class="line number59 index58 alt2">59</div><div class="line number60 index59 alt1">60</div><div class="line number61 index60 alt2">61</div><div class="line number62 index61 alt1">62</div><div class="line number63 index62 alt2">63</div><div class="line number64 index63 alt1">64</div><div class="line number65 index64 alt2">65</div><div class="line number66 index65 alt1">66</div><div class="line number67 index66 alt2">67</div><div class="line number68 index67 alt1">68</div><div class="line number69 index68 alt2">69</div><div class="line number70 index69 alt1">70</div><div class="line number71 index70 alt2">71</div><div class="line number72 index71 alt1">72</div><div class="line number73 index72 alt2">73</div><div class="line number74 index73 alt1">74</div><div class="line number75 index74 alt2">75</div><div class="line number76 index75 alt1">76</div><div class="line number77 index76 alt2">77</div><div class="line number78 index77 alt1">78</div><div class="line number79 index78 alt2">79</div><div class="line number80 index79 alt1">80</div><div class="line number81 index80 alt2">81</div><div class="line number82 index81 alt1">82</div><div class="line number83 index82 alt2">83</div><div class="line number84 index83 alt1">84</div><div class="line number85 index84 alt2">85</div><div class="line number86 index85 alt1">86</div><div class="line number87 index86 alt2">87</div><div class="line number88 index87 alt1">88</div><div class="line number89 index88 alt2">89</div><div class="line number90 index89 alt1">90</div><div class="line number91 index90 alt2">91</div><div class="line number92 index91 alt1">92</div><div class="line number93 index92 alt2">93</div><div class="line number94 index93 alt1">94</div><div class="line number95 index94 alt2">95</div><div class="line number96 index95 alt1">96</div><div class="line number97 index96 alt2">97</div><div class="line number98 index97 alt1">98</div><div class="line number99 index98 alt2">99</div><div class="line number100 index99 alt1">100</div><div class="line number101 index100 alt2">101</div><div class="line number102 index101 alt1">102</div><div class="line number103 index102 alt2">103</div><div class="line number104 index103 alt1">104</div><div class="line number105 index104 alt2">105</div><div class="line number106 index105 alt1">106</div><div class="line number107 index106 alt2">107</div><div class="line number108 index107 alt1">108</div><div class="line number109 index108 alt2">109</div><div class="line number110 index109 alt1">110</div><div class="line number111 index110 alt2">111</div><div class="line number112 index111 alt1">112</div><div class="line number113 index112 alt2">113</div><div class="line number114 index113 alt1">114</div><div class="line number115 index114 alt2">115</div></td><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="xml plain">&lt;!DOCTYPE html&gt;</code></div><div class="line number2 index1 alt1"><code class="xml plain">&lt;</code><code class="xml keyword">html</code><code class="xml plain">&gt;</code></div><div class="line number3 index2 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;</code><code class="xml keyword">head</code><code class="xml plain">&gt;</code></div><div class="line number4 index3 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;</code><code class="xml keyword">title</code><code class="xml plain">&gt;jQM Complex Demo&lt;/</code><code class="xml keyword">title</code><code class="xml plain">&gt;</code></div><div class="line number5 index4 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;</code><code class="xml keyword">meta</code> <code class="xml color1">http-equiv</code><code class="xml plain">=</code><code class="xml string">'Content-Type'</code> <code class="xml color1">content</code><code class="xml plain">=</code><code class="xml string">'text/html; charset=utf-8'</code><code class="xml plain">/&gt;</code></div><div class="line number6 index5 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;</code><code class="xml keyword">meta</code> <code class="xml color1">name</code><code class="xml plain">=</code><code class="xml string">"viewport"</code> <code class="xml color1">content</code><code class="xml plain">=</code><code class="xml string">"width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"</code><code class="xml plain">/&gt;</code></div><div class="line number7 index6 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;</code><code class="xml keyword">link</code> <code class="xml color1">rel</code><code class="xml plain">=</code><code class="xml string">"stylesheet"</code> <code class="xml color1">href</code><code class="xml plain">=</code><code class="xml string">"<a href="http://code.jquery.com/mobile/1.4.0-beta.1/jquery.mobile-1.4.0-beta.1.min.css">http://code.jquery.com/mobile/1.4.0-beta.1/jquery.mobile-1.4.0-beta.1.min.css</a>"</code><code class="xml plain">/&gt;</code></div><div class="line number8 index7 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;</code><code class="xml keyword">link</code> <code class="xml color1">rel</code><code class="xml plain">=</code><code class="xml string">"stylesheet"</code> <code class="xml color1">href</code><code class="xml plain">=</code><code class="xml string">"<a href="http://example.gajotres.net/iscrollview/jquery.mobile.iscrollview.css">http://example.gajotres.net/iscrollview/jquery.mobile.iscrollview.css</a>"</code><code class="xml plain">/&gt;</code></div><div class="line number9 index8 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;</code><code class="xml keyword">link</code> <code class="xml color1">rel</code><code class="xml plain">=</code><code class="xml string">"stylesheet"</code> <code class="xml color1">href</code><code class="xml plain">=</code><code class="xml string">"<a href="http://example.gajotres.net/iscrollview/jquery.mobile.iscrollview-pull.css">http://example.gajotres.net/iscrollview/jquery.mobile.iscrollview-pull.css</a>"</code><code class="xml plain">/&gt;</code></div><div class="line number10 index9 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;</code><code class="xml keyword">style</code><code class="xml plain">&gt;</code></div><div class="line number11 index10 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">.ui-content {</code></div><div class="line number12 index11 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">padding: 0 !important;</code></div><div class="line number13 index12 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">}</code></div><div class="line number14 index13 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;</div><div class="line number15 index14 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">.ui-listview {</code></div><div class="line number16 index15 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">margin: 0 !important;</code></div><div class="line number17 index16 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">}</code></div><div class="line number18 index17 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;</div><div class="line number19 index18 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">.example-wrapper, .example-wrapper div.iscroll-scroller {</code></div><div class="line number20 index19 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">width: 100% !important;</code></div><div class="line number21 index20 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">}</code></div><div class="line number22 index21 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;/</code><code class="xml keyword">style</code><code class="xml plain">&gt;</code></div><div class="line number23 index22 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;</code><code class="xml keyword">script</code> <code class="xml color1">src</code><code class="xml plain">=</code><code class="xml string">"<a href="http://code.jquery.com/jquery-1.10.1.min.js">http://code.jquery.com/jquery-1.10.1.min.js</a>"</code><code class="xml plain">&gt;&lt;/</code><code class="xml keyword">script</code><code class="xml plain">&gt;</code></div><div class="line number24 index23 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;</code><code class="xml keyword">script</code> <code class="xml color1">src</code><code class="xml plain">=</code><code class="xml string">"<a href="http://code.jquery.com/mobile/1.4.0-beta.1/jquery.mobile-1.4.0-beta.1.min.js">http://code.jquery.com/mobile/1.4.0-beta.1/jquery.mobile-1.4.0-beta.1.min.js</a>"</code><code class="xml plain">&gt;&lt;/</code><code class="xml keyword">script</code><code class="xml plain">&gt;</code></div><div class="line number25 index24 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;</code><code class="xml keyword">script</code> <code class="xml color1">src</code><code class="xml plain">=</code><code class="xml string">"<a href="http://example.gajotres.net/iscrollview/iscroll.js">http://example.gajotres.net/iscrollview/iscroll.js</a>"</code><code class="xml plain">&gt;&lt;/</code><code class="xml keyword">script</code><code class="xml plain">&gt;</code></div><div class="line number26 index25 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;</code><code class="xml keyword">script</code> <code class="xml color1">src</code><code class="xml plain">=</code><code class="xml string">"<a href="http://example.gajotres.net/iscrollview/jquery.mobile.iscrollview.js">http://example.gajotres.net/iscrollview/jquery.mobile.iscrollview.js</a>"</code><code class="xml plain">&gt;&lt;/</code><code class="xml keyword">script</code><code class="xml plain">&gt;</code></div><div class="line number27 index26 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;</code><code class="xml keyword">script</code><code class="xml plain">&gt;</code></div><div class="line number28 index27 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">$(document).on('pageinit', '#home', function(){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code></div><div class="line number29 index28 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">var url = '<a href="http://api.themoviedb.org/3/">http://api.themoviedb.org/3/</a>',</code></div><div class="line number30 index29 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">mode = 'search/movie?query=',</code></div><div class="line number31 index30 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">movieName = '&amp;query='+encodeURI('Batman'),&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code></div><div class="line number32 index31 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">key = '&amp;api_key=470fd2ec8853e25d2f8d86f685d2270e';&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code></div><div class="line number33 index32 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;</div><div class="line number34 index33 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">$.ajax({</code></div><div class="line number35 index34 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">url: url + mode + key + movieName ,</code></div><div class="line number36 index35 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">dataType: "jsonp",</code></div><div class="line number37 index36 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">async: true,</code></div><div class="line number38 index37 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">success: function (result) {</code></div><div class="line number39 index38 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">ajax.parseJSONP(result);</code></div><div class="line number40 index39 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">},</code></div><div class="line number41 index40 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">error: function (request,error) {</code></div><div class="line number42 index41 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">alert('Network error has occurred please try again!');</code></div><div class="line number43 index42 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">}</code></div><div class="line number44 index43 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">});&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code></div><div class="line number45 index44 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">});</code></div><div class="line number46 index45 alt1">&nbsp;</div><div class="line number47 index46 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">$(document).on('pagebeforeshow', '#headline', function(){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code></div><div class="line number48 index47 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">$('#movie-data').empty();</code></div><div class="line number49 index48 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">$.each(movieInfo.result, function(i, row) {</code></div><div class="line number50 index49 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">if(row.id == movieInfo.id) {</code></div><div class="line number51 index50 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">$('#movie-data').append('&lt;</code><code class="xml keyword">li</code><code class="xml plain">&gt;&lt;</code><code class="xml keyword">img</code> <code class="xml color1">src</code><code class="xml plain">=</code><code class="xml string">"<a href="http://d3gtl9l2a4fn1j.cloudfront.net/t/p/w185">http://d3gtl9l2a4fn1j.cloudfront.net/t/p/w185</a>'+row.poster_path+'"</code><code class="xml plain">&gt;&lt;/</code><code class="xml keyword">li</code><code class="xml plain">&gt;');</code></div><div class="line number52 index51 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">$('#movie-data').append('&lt;</code><code class="xml keyword">li</code><code class="xml plain">&gt;Title: '+row.original_title+'&lt;/</code><code class="xml keyword">li</code><code class="xml plain">&gt;');</code></div><div class="line number53 index52 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">$('#movie-data').append('&lt;</code><code class="xml keyword">li</code><code class="xml plain">&gt;Release date'+row.release_date+'&lt;/</code><code class="xml keyword">li</code><code class="xml plain">&gt;');</code></div><div class="line number54 index53 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">$('#movie-data').append('&lt;</code><code class="xml keyword">li</code><code class="xml plain">&gt;Popularity : '+row.popularity+'&lt;/</code><code class="xml keyword">li</code><code class="xml plain">&gt;');&nbsp;&nbsp; </code></div><div class="line number55 index54 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">$('#movie-data').append('&lt;</code><code class="xml keyword">li</code><code class="xml plain">&gt;Popularity : '+row.vote_average+'&lt;/</code><code class="xml keyword">li</code><code class="xml plain">&gt;');&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code></div><div class="line number56 index55 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">$('#movie-data').listview('refresh');&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code></div><div class="line number57 index56 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">}</code></div><div class="line number58 index57 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">});&nbsp;&nbsp;&nbsp; </code></div><div class="line number59 index58 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">});</code></div><div class="line number60 index59 alt1">&nbsp;</div><div class="line number61 index60 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">$(document).on('vclick', '#movie-list li a', function(){&nbsp; </code></div><div class="line number62 index61 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">movieInfo.id = $(this).attr('data-id');</code></div><div class="line number63 index62 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">$.mobile.changePage( "#headline", { transition: "slide", changeHash: false });</code></div><div class="line number64 index63 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">});</code></div><div class="line number65 index64 alt2">&nbsp;</div><div class="line number66 index65 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">var movieInfo = {</code></div><div class="line number67 index66 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">id : null,</code></div><div class="line number68 index67 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">result : null</code></div><div class="line number69 index68 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">}</code></div><div class="line number70 index69 alt1">&nbsp;</div><div class="line number71 index70 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">var ajax = {&nbsp; </code></div><div class="line number72 index71 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">parseJSONP:function(result){&nbsp; </code></div><div class="line number73 index72 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">movieInfo.result = result.results;</code></div><div class="line number74 index73 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">$.each(result.results, function(i, row) {</code></div><div class="line number75 index74 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">console.log(JSON.stringify(row));</code></div><div class="line number76 index75 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">$('#movie-list').append('&lt;</code><code class="xml keyword">li</code><code class="xml plain">&gt;&lt;</code><code class="xml keyword">a</code> <code class="xml color1">href</code><code class="xml plain">=</code><code class="xml string">""</code> <code class="xml color1">data-id</code><code class="xml plain">=</code><code class="xml string">"' + row.id + '"</code><code class="xml plain">&gt;&lt;</code><code class="xml keyword">img</code> <code class="xml color1">src</code><code class="xml plain">=</code><code class="xml string">"<a href="http://d3gtl9l2a4fn1j.cloudfront.net/t/p/w185">http://d3gtl9l2a4fn1j.cloudfront.net/t/p/w185</a>'+row.poster_path+'"</code><code class="xml plain">/&gt;&lt;</code><code class="xml keyword">h3</code><code class="xml plain">&gt;' + row.title + '&lt;/</code><code class="xml keyword">h3</code><code class="xml plain">&gt;&lt;</code><code class="xml keyword">p</code><code class="xml plain">&gt;' + row.vote_average + '/10&lt;/</code><code class="xml keyword">p</code><code class="xml plain">&gt;&lt;/</code><code class="xml keyword">a</code><code class="xml plain">&gt;&lt;/</code><code class="xml keyword">li</code><code class="xml plain">&gt;');</code></div><div class="line number77 index76 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">});</code></div><div class="line number78 index77 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">$('#movie-list').listview('refresh');</code></div><div class="line number79 index78 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">}</code></div><div class="line number80 index79 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code></div><div class="line number81 index80 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;/</code><code class="xml keyword">script</code><code class="xml plain">&gt;</code></div><div class="line number82 index81 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;/</code><code class="xml keyword">head</code><code class="xml plain">&gt;</code></div><div class="line number83 index82 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;</code><code class="xml keyword">body</code><code class="xml plain">&gt;&nbsp;&nbsp;&nbsp;&nbsp; </code></div><div class="line number84 index83 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;</code><code class="xml keyword">div</code> <code class="xml color1">data-role</code><code class="xml plain">=</code><code class="xml string">"page"</code> <code class="xml color1">id</code><code class="xml plain">=</code><code class="xml string">"home"</code><code class="xml plain">&gt;</code></div><div class="line number85 index84 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;</code><code class="xml keyword">div</code> <code class="xml color1">data-theme</code><code class="xml plain">=</code><code class="xml string">"a"</code> <code class="xml color1">data-role</code><code class="xml plain">=</code><code class="xml string">"header"</code><code class="xml plain">&gt;</code></div><div class="line number86 index85 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;</code><code class="xml keyword">h3</code><code class="xml plain">&gt;</code></div><div class="line number87 index86 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">Movie List</code></div><div class="line number88 index87 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;/</code><code class="xml keyword">h3</code><code class="xml plain">&gt;</code></div><div class="line number89 index88 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;/</code><code class="xml keyword">div</code><code class="xml plain">&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code></div><div class="line number90 index89 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;</code><code class="xml keyword">div</code> <code class="xml color1">data-role</code><code class="xml plain">=</code><code class="xml string">"content"</code><code class="xml plain">&gt;</code></div><div class="line number91 index90 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;</code><code class="xml keyword">div</code> <code class="xml color1">class</code><code class="xml plain">=</code><code class="xml string">"example-wrapper"</code> <code class="xml plain">data-iscroll&gt;</code></div><div class="line number92 index91 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;</code><code class="xml keyword">ul</code> <code class="xml color1">data-role</code><code class="xml plain">=</code><code class="xml string">"listview"</code>&nbsp; <code class="xml color1">id</code><code class="xml plain">=</code><code class="xml string">"movie-list"</code> <code class="xml color1">data-theme</code><code class="xml plain">=</code><code class="xml string">"a"</code><code class="xml plain">&gt;</code></div><div class="line number93 index92 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;</div><div class="line number94 index93 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;/</code><code class="xml keyword">ul</code><code class="xml plain">&gt;</code></div><div class="line number95 index94 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;/</code><code class="xml keyword">div</code><code class="xml plain">&gt;</code></div><div class="line number96 index95 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;/</code><code class="xml keyword">div</code><code class="xml plain">&gt;</code></div><div class="line number97 index96 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;</code><code class="xml keyword">div</code> <code class="xml color1">data-theme</code><code class="xml plain">=</code><code class="xml string">"a"</code> <code class="xml color1">data-role</code><code class="xml plain">=</code><code class="xml string">"footer"</code><code class="xml plain">&gt;</code></div><div class="line number98 index97 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;</code><code class="xml keyword">h1</code><code class="xml plain">&gt;Copyright 2013&lt;/</code><code class="xml keyword">h1</code><code class="xml plain">&gt;</code></div><div class="line number99 index98 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;/</code><code class="xml keyword">div</code><code class="xml plain">&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code></div><div class="line number100 index99 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;/</code><code class="xml keyword">div</code><code class="xml plain">&gt;</code></div><div class="line number101 index100 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;</code><code class="xml keyword">div</code> <code class="xml color1">data-role</code><code class="xml plain">=</code><code class="xml string">"page"</code> <code class="xml color1">id</code><code class="xml plain">=</code><code class="xml string">"headline"</code><code class="xml plain">&gt;</code></div><div class="line number102 index101 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;</code><code class="xml keyword">div</code> <code class="xml color1">data-theme</code><code class="xml plain">=</code><code class="xml string">"a"</code> <code class="xml color1">data-role</code><code class="xml plain">=</code><code class="xml string">"header"</code><code class="xml plain">&gt;</code></div><div class="line number103 index102 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;</code><code class="xml keyword">a</code> <code class="xml color1">href</code><code class="xml plain">=</code><code class="xml string">"#home"</code> <code class="xml color1">class</code><code class="xml plain">=</code><code class="xml string">"ui-btn-left"</code> <code class="xml color1">data-transition</code><code class="xml plain">=</code><code class="xml string">"slide"</code> <code class="xml color1">data-direction</code><code class="xml plain">=</code><code class="xml string">"reverse"</code><code class="xml plain">&gt;Back&lt;/</code><code class="xml keyword">a</code><code class="xml plain">&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 </code></div><div class="line number104 index103 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;</code><code class="xml keyword">h3</code><code class="xml plain">&gt;</code></div><div class="line number105 index104 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">Movie Info</code></div><div class="line number106 index105 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;/</code><code class="xml keyword">h3</code><code class="xml plain">&gt;</code></div><div class="line number107 index106 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;/</code><code class="xml keyword">div</code><code class="xml plain">&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code></div><div class="line number108 index107 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;</code><code class="xml keyword">div</code> <code class="xml color1">data-role</code><code class="xml plain">=</code><code class="xml string">"content"</code><code class="xml plain">&gt;</code></div><div class="line number109 index108 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;</code><code class="xml keyword">ul</code> <code class="xml color1">data-role</code><code class="xml plain">=</code><code class="xml string">"listview"</code>&nbsp; <code class="xml color1">id</code><code class="xml plain">=</code><code class="xml string">"movie-data"</code> <code class="xml color1">data-theme</code><code class="xml plain">=</code><code class="xml string">"a"</code><code class="xml plain">&gt;</code></div><div class="line number110 index109 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;</div><div class="line number111 index110 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;/</code><code class="xml keyword">ul</code><code class="xml plain">&gt;</code></div><div class="line number112 index111 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;/</code><code class="xml keyword">div</code><code class="xml plain">&gt;</code></div><div class="line number113 index112 alt2"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;/</code><code class="xml keyword">div</code><code class="xml plain">&gt;&nbsp;&nbsp;&nbsp; </code></div><div class="line number114 index113 alt1"><code class="xml spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="xml plain">&lt;/</code><code class="xml keyword">body</code><code class="xml plain">&gt;</code></div><div class="line number115 index114 alt2"><code class="xml plain">&lt;/</code><code class="xml keyword">html</code><code class="xml plain">&gt;&nbsp;&nbsp; </code></div></div></td></tr></tbody></table></div></div><div style="width:100%height: 0.35em;">&nbsp;</div>

There’s only one last thing to do, we need to copy <span class="su-highlight" style="background:#e9e9e9;color:#000000">&nbsp;index.html&nbsp;</span> into a project <span class="su-highlight" style="background:#e9e9e9;color:#000000">&nbsp;assets&nbsp;</span> directory. It can be copied and paste there or you can copy it directly into the <span class="su-highlight" style="background:#e9e9e9;color:#000000">&nbsp;assets&nbsp;</span> directory. If you can’t find your project folder just right click it -&gt; select <span class="su-highlight" style="background:#e9e9e9;color:#000000">&nbsp;Properties&nbsp;</span> -&gt; select <span class="su-highlight" style="background:#e9e9e9;color:#000000">&nbsp;Resource&nbsp;</span> and path will be shown in the window right side under the name <span class="su-highlight" style="background:#e9e9e9;color:#000000">&nbsp;Location&nbsp;</span>.<div style="width:100%height: 0.35em;">&nbsp;</div>

Last step requires us to execute out project. Right click on the <span class="su-highlight" style="background:#e9e9e9;color:#000000">&nbsp;project&nbsp;</span> -&gt; Select <span class="su-highlight" style="background:#e9e9e9;color:#000000">&nbsp;Run As&nbsp;</span> – Select <span class="su-highlight" style="background:#e9e9e9;color:#000000">&nbsp;Android Application&nbsp;</span>
 and wait for the emulator to boot up. This can take several minutes so 
be patient. If you don’t want to wait and have an Android smartphone, 
just plug it into your PC (hopefully you have already installed device 
drivers). Because real device has a priority over a virtual one, 
application is going to be installed and executed on your mobile device.
 Also take care that device Android version is at least equal or higher 
then project Android version.<div style="width:100%height: 0.35em;">&nbsp;</div>

<h1>Reading material</h1><hr><div style="width:100%height: 0.35em;">&nbsp;</div><div style="width:100%height: 0.35em;">&nbsp;</div>

<div class="column one_fourth">
<a href="http://www.amazon.com/gp/product/1782167897/ref=as_li_tf_tl?ie=UTF8&amp;camp=1789&amp;creative=9325&amp;creativeASIN=1782167897&amp;linkCode=as2&amp;tag=gajotres-20"><img src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/jquerymobile-book.jpg" height="160" width="130"></a><img src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/ir_002.gif" alt="" style="border:none !important; margin:0px !important;" border="0" height="1" width="1">
</div><div class="column three_fourth last">
<a href="http://www.amazon.com/gp/product/1782167897/ref=as_li_tf_tl?ie=UTF8&amp;camp=1789&amp;creative=9325&amp;creativeASIN=1782167897&amp;linkCode=as2&amp;tag=gajotres-20"><strong>jQuery Mobile Web Development Essentials, Second Edition</strong></a><img src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/ir_002.gif" alt="" style="border:none !important; margin:0px !important;" border="0" height="1" width="1">
Yet another book from the Packt Publishing, second installment of this 
series. Originally I have bought first installment of this book which 
was outdated so you should also be careful. This one is currently 2 
months old (26.11.2013) so it should satisfy you in coming months. 
Second edition is excellent all around book, covering everything from 
API to working examples. It is also an excellent book if you want to 
learn everything that needs to be know about jQuery Mobile API (Chapter 
10), something event official product web page is lacking. Phonegap 
usage is covered in the Chapter 12.
</div>
         <div class="clearfix"></div>
<div class="column one_fourth">

<a href="http://www.amazon.com/gp/product/0321814290/ref=as_li_tf_tl?ie=UTF8&amp;camp=1789&amp;creative=9325&amp;creativeASIN=0321814290&amp;linkCode=as2&amp;tag=gajotres-20"><img src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/phonegap-book.jpg" height="160" width="130"></a><img src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/ir.gif" alt="" style="border:none !important; margin:0px !important;" border="0" height="1" width="1">
</div><div class="column three_fourth last">
<a href="http://www.amazon.com/gp/product/0321814290/ref=as_li_tf_tl?ie=UTF8&amp;camp=1789&amp;creative=9325&amp;creativeASIN=0321814290&amp;linkCode=as2&amp;tag=gajotres-20"><strong>PhoneGap Essentials: Building Cross-Platform Mobile Apps</strong></a><img src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/ir.gif" alt="" style="border:none !important; margin:0px !important;" border="0" height="1" width="1">
There are several available Phonegap books but this one covers 
everything I thought you i this article plus Phonegap API. This book 
also covers other mobile platforms unlike my article which covered only 
Android.
</div>
         <div class="clearfix"></div>

<h1>Conclusion</h1><hr><div style="width:100%height: 0.35em;">&nbsp;</div><div style="width:100%height: 0.35em;">&nbsp;</div>

More then the tutorial this article was meant to show us how last jQuery
 Mobile version runs and feels wrapped inside the PhoneGap app. From 
what I can see it behaves much much better then previous jQuery Mobile 
versions, CSS reductions really helped to make it more fluid and native 
like. Page transitions finally feel native like, unfortunately scrolling
 still don’t feel fluid, still it is a big improvement over previous 
versions. 

In the end, this is a big step for jQuery Mobile, it is finally catching
 with his commercial brothers <strong>Kendo UI</strong> and <strong>PhoneJs</strong>. I can safely say this jQuery Mobile versions is more then usable with PhoneGap, thumbs up.<div style="width:100%height: 0.35em;">&nbsp;</div><div style="width:100%height: 0.35em;">&nbsp;</div>
<!-- Quick Adsense WordPress Plugin: http://quicksense.net/ -->
<div style="float:none;margin:10px 0 10px 0;text-align:center;">
<script async="" src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/adsbygoogle.js"></script>
<!-- Post - Bottom -->
<ins data-adsbygoogle-status="done" class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2165291328933509" data-ad-slot="3235031879"><ins style="display:inline-table;border:none;height:250px;margin:0;padding:0;position:relative;visibility:visible;width:300px;background-color:transparent"><ins id="aswift_2_anchor" style="display:block;border:none;height:250px;margin:0;padding:0;position:relative;visibility:visible;width:300px;background-color:transparent"><iframe marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" onload="var i=this.id,s=window.google_iframe_oncopy,H=s&amp;&amp;s.handlers,h=H&amp;&amp;H[i],w=this.contentWindow,d;try{d=w.document}catch(e){}if(h&amp;&amp;d&amp;&amp;(!d.body||!d.body.firstChild)){if(h.call){setTimeout(h,0)}else if(h.match){try{h=s.upd(h,i)}catch(e){}w.location.replace(h)}}" id="aswift_2" name="aswift_2" style="left:0;position:absolute;top:0;" frameborder="0" height="250" scrolling="no" width="300"></iframe></ins></ins></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>

<div style="font-size:0px;height:0px;line-height:0px;margin:0;padding:0;clear:both"></div>
<div class="wp_rp_wrap  wp_rp_vertical"><div class="wp_rp_content"><h3 class="related_post_title">Related articles</h3><ul class="related_post wp_rp" style="visibility: visible"><li data-position="0" data-poid="ex-in_3455" data-post-type="own_sourcefeed"><a href="http://www.gajotres.net/creating-phonegap-project-on-macos/" class="wp_rp_thumbnail"><img src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/phonegap_macos-150x150.jpg" alt="Creating Phonegap project on MacOS from Command Line"></a><small class="wp_rp_publish_date"></small> <a href="http://www.gajotres.net/creating-phonegap-project-on-macos/" class="wp_rp_title">Creating Phonegap project on MacOS from Command Line</a></li><li data-position="1" data-poid="ex-in_2179" data-post-type="own_sourcefeed"><a href="http://www.gajotres.net/10-life-saving-jquery-mobile-plugins/" class="wp_rp_thumbnail"><img src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/plugins_small-150x150.jpg" alt="10 life saving jQuery Mobile plugins"></a><small class="wp_rp_publish_date"></small> <a href="http://www.gajotres.net/10-life-saving-jquery-mobile-plugins/" class="wp_rp_title">10 life saving jQuery Mobile plugins</a></li><li data-position="2" data-poid="ex-in_3025" data-post-type="own_sourcefeed"><a href="http://www.gajotres.net/top-7-notable-less-known-mobile-html5-frameworks/" class="wp_rp_thumbnail"><img src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/frameworks2-150x150.jpg" alt="Top 7 notable less known mobile HTML5 frameworks"></a><small class="wp_rp_publish_date"></small> <a href="http://www.gajotres.net/top-7-notable-less-known-mobile-html5-frameworks/" class="wp_rp_title">Top 7 notable less known mobile HTML5 frameworks</a></li><li data-position="3" data-poid="ex-in_2875" data-post-type="own_sourcefeed"><a href="http://www.gajotres.net/jquery-mobile-vs-kendo-ui/" class="wp_rp_thumbnail"><img src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/kendoVSjqm-150x150.jpg" alt="jQuery Mobile vs Kendo UI"></a><small class="wp_rp_publish_date"></small> <a href="http://www.gajotres.net/jquery-mobile-vs-kendo-ui/" class="wp_rp_title">jQuery Mobile vs Kendo UI</a></li><li data-position="4" data-poid="ex-in_172" data-post-type="own_sourcefeed"><a href="http://www.gajotres.net/top-7-mobile-application-html5-frameworks/" class="wp_rp_thumbnail"><img src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/frameworks-150x150.jpg" alt="Top 7 Mobile application HTML5 frameworks"></a><small class="wp_rp_publish_date"></small> <a href="http://www.gajotres.net/top-7-mobile-application-html5-frameworks/" class="wp_rp_title">Top 7 Mobile application HTML5 frameworks</a></li><li data-position="5" data-poid="ex-in_2265" data-post-type="own_sourcefeed"><a href="http://www.gajotres.net/learn-how-to-customize-jquery-mobile-application/" class="wp_rp_thumbnail"><img src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/customize_small-150x150.jpg" alt="Learn how to customize jQuery Mobile application"></a><small class="wp_rp_publish_date"></small> <a href="http://www.gajotres.net/learn-how-to-customize-jquery-mobile-application/" class="wp_rp_title">Learn how to customize jQuery Mobile application</a></li></ul></div></div>
                                                   
                                        <div class="clearfix"></div>
									</div>
                                    
                                    <div class="taglist">
                                    <strong>Tags:</strong> <a href="http://www.gajotres.net/tag/jquery-mobile-2/" rel="tag">jQuery-Mobile</a><a href="http://www.gajotres.net/tag/phonegap/" rel="tag">Phonegap</a>                                    </div>
                                    
                                    <div class="pagination">
                                        <span class="nav-previous alignleft"><a href="http://www.gajotres.net/top-10-best-looking-free-jquery-mobile-themes/" rel="prev">← Previous Post</a></span>
                                        <span class="nav-next alignright"><a href="http://www.gajotres.net/creating-phonegap-project-on-macos/" rel="next">Next Post →</a></span>
                                        <div class="clearfix"></div>
                                    </div>
								</article>
 								                                
								<!-- COMMENTS  -->
                                
<!-- You can start editing here. -->
       <div class="comments">
		 <h2>13 COMMENTS ON THIS POST To “Building a Native Mobile App with Phonegap and jQuery Mobile 1.4”</h2>
		 <ul class="comments-list">
                 <li class="media" id="comment-932">
            <div class="img">
                <img alt="" src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/9229d48b4541cee61eb446f7554b1ff1.png" class="avatar avatar-85 photo" height="85" width="85">            </div>
            <div class="bd">
                <h3>TorchMan</h3>
                <span class="comment-info">October 2, 2013 at 16:16</span>
                                <div class="rich-content">
                <p>Hey Gajotres,</p>
<p>nice article. SInce the last week, i’ve tried to integrate iScollView into my PhoneGap+JQM Projekt for Android.<br>
What i noticed is, that with iScrollView scrolling get’s choppy with large content. Have you experienced similar effects?</p>
                </div>
            </div>
        </li>
<ul class="children">
      <li class="media" id="comment-976">
            <div class="img">
                <img alt="Dragan Gaić" src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/Gajotres_avatar-85x85.jpg" class="avatar avatar-85 photo" height="85" width="85">            </div>
            <div class="bd">
                <h3><a href="http://www.gajotres.net/" rel="external nofollow" class="url">Dragan Gaić</a></h3>
                <span class="comment-info">October 4, 2013 at 15:22</span>
                                <div class="rich-content">
                <p>Yes I have, you can even see it in my app example. It
 just don’t feels native enough, that’s why I wrote “unfortunately 
scrolling still don’t feel fluid”. Also to be fair I wouldn’t put this 
on jQuery Mobile, at least not everything.</p>
                </div>
            </div>
        </li>
<!-- #comment-## -->
</ul><!-- .children -->
<!-- #comment-## -->
      <li class="media" id="comment-1368">
            <div class="img">
                <img alt="" src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/090ae86a9c9543ea945ced65abcefb1f.png" class="avatar avatar-85 photo" height="85" width="85">            </div>
            <div class="bd">
                <h3>alamatpalsu2</h3>
                <span class="comment-info">October 11, 2013 at 00:16</span>
                                <div class="rich-content">
                <p>iOS/MacOS combination please?</p>
                </div>
            </div>
        </li>
<!-- #comment-## -->
      <li class="media" id="comment-1527">
            <div class="img">
                <img alt="" src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/ff3d8bddc00e864a2e5f59cc192025c6.png" class="avatar avatar-85 photo" height="85" width="85">            </div>
            <div class="bd">
                <h3>Icebergdelphi</h3>
                <span class="comment-info">October 12, 2013 at 21:50</span>
                                <div class="rich-content">
                <p>Nice work, but i’ve been traying to launch into the 
virtual android and rise an error due that i put the index inside isset,
 but i realized that the isset directory has a www folder and inside www
 there are: css, img, js, res, spec, cordova,js, index,html and etc, if i
 replace the index,html for my index,html an issue appears, so what is 
happens? tnx.</p>
                </div>
            </div>
        </li>
<!-- #comment-## -->
      <li class="media" id="comment-1530">
            <div class="img">
                <img alt="" src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/ff3d8bddc00e864a2e5f59cc192025c6.png" class="avatar avatar-85 photo" height="85" width="85">            </div>
            <div class="bd">
                <h3>Icebergdelphii</h3>
                <span class="comment-info">October 12, 2013 at 22:41</span>
                                <div class="rich-content">
                <p>Resolved: Application Error Is a directory (file:///#android_asset/www/index.html)<br>
what did I was, downloaded the jquery.mobile-1.3.0.js file and had it 
placed locally inside my www folder. That fixed my problem.<br>
I was using a resource that requires internet access as Jquery, etc.</p>
<p>Tnx again.</p>
                </div>
            </div>
        </li>
<!-- #comment-## -->
      <li class="media" id="comment-1642">
            <div class="img">
                <img alt="" src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/35bf64bfceab002211e0cc3ff209e560.png" class="avatar avatar-85 photo" height="85" width="85">            </div>
            <div class="bd">
                <h3>Marcus</h3>
                <span class="comment-info">October 14, 2013 at 09:39</span>
                                <div class="rich-content">
                <p>Yes, thanks for a great article!<br>
I would also love an iOS/MacOS combination so I’m showing my interest.<br>
Cheers</p>
                </div>
            </div>
        </li>
<!-- #comment-## -->
      <li class="media" id="comment-2409">
            <div class="img">
                <img alt="" src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/e475e64fd98c084eb49941d7056cfab0.png" class="avatar avatar-85 photo" height="85" width="85">            </div>
            <div class="bd">
                <h3>Lisa</h3>
                <span class="comment-info">November 22, 2013 at 13:46</span>
                                <div class="rich-content">
                <p>Great article!</p>
<p>I’m also showing my interest for a iOS/MacOS combination. </p>
<p>Have nice day</p>
                </div>
            </div>
        </li>
<ul class="children">
      <li class="media" id="comment-2412">
            <div class="img">
                <img alt="Dragan Gaić" src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/Gajotres_avatar-85x85.jpg" class="avatar avatar-85 photo" height="85" width="85">            </div>
            <div class="bd">
                <h3><a href="http://www.gajotres.net/" rel="external nofollow" class="url">Dragan Gaić</a></h3>
                <span class="comment-info">November 22, 2013 at 15:03</span>
                                <div class="rich-content">
                <p>Your wish is my command, article can be found here: <a href="http://www.gajotres.net/creating-phonegap-project-on-macos/" rel="nofollow">http://www.gajotres.net/creating-phonegap-project-on-macos/</a></p>
                </div>
            </div>
        </li>
<!-- #comment-## -->
</ul><!-- .children -->
<!-- #comment-## -->
      <li class="media" id="comment-2815">
            <div class="img">
                <img alt="" src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/ab605cae743a66126cd339d4baa7c884.png" class="avatar avatar-85 photo" height="85" width="85">            </div>
            <div class="bd">
                <h3>vladislav</h3>
                <span class="comment-info">November 25, 2013 at 12:12</span>
                                <div class="rich-content">
                <p>Great! Would ask for IOS please</p>
                </div>
            </div>
        </li>
<ul class="children">
      <li class="media" id="comment-2817">
            <div class="img">
                <img alt="Dragan Gaić" src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/Gajotres_avatar-85x85.jpg" class="avatar avatar-85 photo" height="85" width="85">            </div>
            <div class="bd">
                <h3><a href="http://www.gajotres.net/" rel="external nofollow" class="url">Dragan Gaić</a></h3>
                <span class="comment-info">November 25, 2013 at 12:24</span>
                                <div class="rich-content">
                <p>I already done it: <a href="http://www.gajotres.net/creating-phonegap-project-on-macos/" rel="nofollow">http://www.gajotres.net/creating-phonegap-project-on-macos/</a> with one difference, jQuery Mobile part is not included because it is identical to this article.</p>
                </div>
            </div>
        </li>
<!-- #comment-## -->
</ul><!-- .children -->
<!-- #comment-## -->
      <li class="media" id="comment-3336">
            <div class="img">
                <img alt="" src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/d900b4504dec4bbae7ed91d5b6da4891.png" class="avatar avatar-85 photo" height="85" width="85">            </div>
            <div class="bd">
                <h3>Joey</h3>
                <span class="comment-info">November 28, 2013 at 09:22</span>
                                <div class="rich-content">
                <p>Wish I had found this site earlier; would have saved me a day to see how jq mobile performs; thx!</p>
                </div>
            </div>
        </li>
<!-- #comment-## -->
      <li class="media" id="comment-5043">
            <div class="img">
                <img alt="" src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/bb92f9d9c487fe56b730a1b3ee6967e2.jpg" class="avatar avatar-85 photo" height="85" width="85">            </div>
            <div class="bd">
                <h3>Donny Firdhana</h3>
                <span class="comment-info">December 5, 2013 at 12:09</span>
                                <div class="rich-content">
                <p>Hi there,</p>
<p>when I create project, I got error message says :<br>
“Error: ENOENT”, no such file or directory ‘c:\Android\Project…..’ –&gt; just like you saying.</p>
<p>anything wrong..?</p>
                </div>
            </div>
        </li>
<!-- #comment-## -->
      <li class="media" id="comment-5100">
            <div class="img">
                <img alt="" src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/cebbf8fc62b3c825c801d7708c53e769.png" class="avatar avatar-85 photo" height="85" width="85">            </div>
            <div class="bd">
                <h3>Roshdy</h3>
                <span class="comment-info">December 11, 2013 at 11:44</span>
                                <div class="rich-content">
                <p>I followed this tutorial step by step, the only change is that i’m using the latest cordova 3.2<br>
However, i keep having this Error on the “create” application step<br>
[Error: An error occurred while listing Android targets]</p>
<p>Please help!</p>
                </div>
            </div>
        </li>
<!-- #comment-## -->
 
         </ul>
         
                 </div>
       

								<div id="respond" class="comment-respond">
				<h3 id="reply-title" class="comment-reply-title"></h3><h2>Leave a Reply</h2> <small><a rel="nofollow" id="cancel-comment-reply-link" href="http://www.gajotres.net/building-a-native-mobile-app-with-phonegap-and-jquery-mobile-1-4/#respond" style="display:none;">Cancel reply</a></small>
									<form action="http://www.gajotres.net/wp-comments-post.php" method="post" id="commentform" class="comment-form">
																										<div class="input-container"><input name="author" id="author" size="22" tabindex="1" aria-required="true" placeholder="Name *" type="text"> </div>
<div class="input-container"><input name="email" id="email" size="22" tabindex="2" aria-required="true" placeholder="Email *" type="text"> </div>
<div class="input-container no-right-margin"><input name="url" id="url" size="22" tabindex="3" aria-required="true" placeholder="Website" type="text"> </div>
<p class="cptch_block"><br>		<input name="cptch_result" value="l5E=" type="hidden">
		<input name="cptch_time" value="1389358746" type="hidden">
		<input value="Version: 2.4" type="hidden">
		eight − 1 =  <input id="cptch_input" autocomplete="off" name="cptch_number" maxlength="2" size="2" aria-required="true" required="required" style="margin-bottom:0;display:inline;font-size: 12px;width: 40px;" type="text">	</p>												<div class="input-container-full"><textarea name="comment" id="comment" cols="58" rows="10" tabindex="4" placeholder="Comment"></textarea></div><div class="input-container-full"><button type="submit" class="button">Post Comment</button></div>												<p class="form-submit">
							<input name="submit" id="submit" value="" type="submit">
							<input name="comment_post_ID" value="3306" id="comment_post_ID" type="hidden">
<input name="comment_parent" id="comment_parent" value="0" type="hidden">
						</p>
						<p style="display: none;"><input id="akismet_comment_nonce" name="akismet_comment_nonce" value="7245ea8895" type="hidden"></p>					</form>
							</div><!-- #respond -->
								</div><!-- END GRID-12 -->
            </div><!-- END CONTAINER -->
</section>
<a style="display: inline;" href="#top" id="backtoTop"></a>
<script type="text/javascript">
  var template="http://www.gajotres.net/wp-content/themes/oldcar";
  var loadimg="http://www.gajotres.net/wp-content/themes/oldcar/functions/images/loader.gif";
  var loadimg2="http://www.gajotres.net/wp-content/themes/oldcar/functions/images/loader2.gif";
  var infinit=1;
  var ajax_portfolio=1;
  var widgetID,number,flickrID;
</script>
<script type="text/javascript" src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/shCore.js"></script>
<script type="text/javascript" src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/shBrushAS3.js"></script>
<script type="text/javascript" src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/shBrushBash.js"></script>
<script type="text/javascript" src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/shBrushColdFusion.js"></script>
<script type="text/javascript" src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/shBrushClojure.js"></script>
<script type="text/javascript" src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/shBrushCpp.js"></script>
<script type="text/javascript" src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/shBrushCSharp.js"></script>
<script type="text/javascript" src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/shBrushCss.js"></script>
<script type="text/javascript" src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/shBrushDelphi.js"></script>
<script type="text/javascript" src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/shBrushDiff.js"></script>
<script type="text/javascript" src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/shBrushErlang.js"></script>
<script type="text/javascript" src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/shBrushFSharp.js"></script>
<script type="text/javascript" src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/shBrushGroovy.js"></script>
<script type="text/javascript" src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/shBrushJava.js"></script>
<script type="text/javascript" src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/shBrushJavaFX.js"></script>
<script type="text/javascript" src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/shBrushJScript.js"></script>
<script type="text/javascript" src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/shBrushLatex.js"></script>
<script type="text/javascript" src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/shBrushMatlabKey.js"></script>
<script type="text/javascript" src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/shBrushObjC.js"></script>
<script type="text/javascript" src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/shBrushPerl.js"></script>
<script type="text/javascript" src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/shBrushPhp.js"></script>
<script type="text/javascript" src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/shBrushPlain.js"></script>
<script type="text/javascript" src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/shBrushPowerShell.js"></script>
<script type="text/javascript" src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/shBrushPython.js"></script>
<script type="text/javascript" src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/shBrushR.js"></script>
<script type="text/javascript" src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/shBrushRuby.js"></script>
<script type="text/javascript" src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/shBrushScala.js"></script>
<script type="text/javascript" src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/shBrushSql.js"></script>
<script type="text/javascript" src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/shBrushVb.js"></script>
<script type="text/javascript" src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/shBrushXml.js"></script>
<script type="text/javascript">
	(function(){
		var corecss = document.createElement('link');
		var themecss = document.createElement('link');
		var corecssurl = "http://www.gajotres.net/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/styles/shCore.css?ver=3.0.83c";
		if ( corecss.setAttribute ) {
				corecss.setAttribute( "rel", "stylesheet" );
				corecss.setAttribute( "type", "text/css" );
				corecss.setAttribute( "href", corecssurl );
		} else {
				corecss.rel = "stylesheet";
				corecss.href = corecssurl;
		}
		document.getElementsByTagName("head")[0].insertBefore( corecss, document.getElementById("syntaxhighlighteranchor") );
		var themecssurl = "http://www.gajotres.net/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/styles/shThemeDefault.css?ver=3.0.83c";
		if ( themecss.setAttribute ) {
				themecss.setAttribute( "rel", "stylesheet" );
				themecss.setAttribute( "type", "text/css" );
				themecss.setAttribute( "href", themecssurl );
		} else {
				themecss.rel = "stylesheet";
				themecss.href = themecssurl;
		}
		//document.getElementById("syntaxhighlighteranchor").appendChild(themecss);
		document.getElementsByTagName("head")[0].insertBefore( themecss, document.getElementById("syntaxhighlighteranchor") );
	})();
	SyntaxHighlighter.config.strings.expandSource = '+ expand source';
	SyntaxHighlighter.config.strings.help = '?';
	SyntaxHighlighter.config.strings.alert = 'SyntaxHighlighter\n\n';
	SyntaxHighlighter.config.strings.noBrush = 'Can\'t find brush for: ';
	SyntaxHighlighter.config.strings.brushNotHtmlScript = 'Brush wasn\'t configured for html-script option: ';
	SyntaxHighlighter.defaults['pad-line-numbers'] = false;
	SyntaxHighlighter.defaults['toolbar'] = false;
	SyntaxHighlighter.all();
</script>
<link rel="stylesheet" id="su-content-shortcodes-css" href="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/content-shortcodes.css" type="text/css" media="all">
<script type="text/javascript" src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/comment-reply.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
var fsb = {"ajax":"http:\/\/www.gajotres.net\/wp-admin\/admin-ajax.php"};
/* ]]> */
</script>
<script type="text/javascript" src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/fsb.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
var su_other_shortcodes = {"no_preview":"This shortcode doesn't work in live preview. Please insert it into editor and preview on the site."};
/* ]]> */
</script>
<script type="text/javascript" src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/other-shortcodes.js"></script>
<script type="text/javascript" src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/jquery_006.js"></script>
<script type="text/javascript" src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/jquery_003.js"></script>
<script type="text/javascript" src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/jquery_004.js"></script>
<script type="text/javascript" src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/jquery_008.js"></script>
<script type="text/javascript" src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/jquery_007.js"></script>
<script type="text/javascript" src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/jquery_005.js"></script>
<script type="text/javascript" src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/jquery_010.js"></script>
<script type="text/javascript" src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/modernizr.js"></script>
<script type="text/javascript" src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/jquery.js"></script>
<script type="text/javascript" src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/jflickrfeed.js"></script>
<script type="text/javascript" src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/hoverIntent.js"></script>
<script type="text/javascript" src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/jquery_009.js"></script>
<script type="text/javascript" src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/oldcar.js"></script>

<div style="display: none;" id="cboxOverlay"></div><div style="display: none;" class="" id="colorbox"><div id="cboxWrapper"><div><div style="float: left;" id="cboxTopLeft"></div><div style="float: left;" id="cboxTopCenter"></div><div style="float: left;" id="cboxTopRight"></div></div><div style="clear: left;"><div style="float: left;" id="cboxMiddleLeft"></div><div style="float: left;" id="cboxContent"><div style="width: 0px; height: 0px; overflow: hidden; float: left;" id="cboxLoadedContent"></div><div style="float: left;" id="cboxTitle"></div><div style="float: left;" id="cboxCurrent"></div><div style="float: left;" id="cboxNext"></div><div style="float: left;" id="cboxPrevious"></div><div style="float: left;" id="cboxSlideshow"></div><div style="float: left;" id="cboxClose"></div></div><div style="float: left;" id="cboxMiddleRight"></div></div><div style="clear: left;"><div style="float: left;" id="cboxBottomLeft"></div><div style="float: left;" id="cboxBottomCenter"></div><div style="float: left;" id="cboxBottomRight"></div></div></div><div style="position: absolute; width: 9999px; visibility: hidden; display: none;"></div></div><div style="width: 5px; z-index: 9002; position: absolute; top: 0px; left: 355px; height: 24285px; display: none; opacity: 0;" id="ascrail2000"><div style="position: relative; top: 0px; float: right; width: 5px; height: 0px; background-color: rgb(0, 0, 0); border: medium none; background-clip: padding-box; border-radius: 5px 5px 5px 5px;"></div></div><iframe style="width: 1px; height: 1px; position: absolute; top: -100px;" src="Building%20a%20Native%20Mobile%20App%20with%20Phonegap%20and%20jQuery%20Mobile%201.4%20_%20Gajotres.net_files/postmessageRelay.htm" id="oauth2relay1456420324" name="oauth2relay1456420324"></iframe></body></html>